Skip to content Skip to sidebar Skip to footer
Home / Checkbox / Html / Input / Jquery

Disable Input On Check Checkbox

Post a Comment
Need to disable an input when the check-box is unchecked, and when it is checked enable it. My code is like this:
Copy
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="y"><inputtype="checkbox"class="myCheck" /><inputtype="select"name="x"class="mySelect" /></div><divclass="y"><inputtype="checkbox"class="myCheck" /><inputtype="select"name="x"class="mySelect" /></div><divclass="y"><inputtype="checkbox"class="myCheck" /><inputtype="select"name="x"class="mySelect" /></div>

References

.next()

.prop()

Solution 2:

If you want to go the pure CSS route, you can write CSS that changes the opacity and pointer-events when the checkbox sibling is unchecked.

.y.myCheck:not(:checked) + .mySelect {
  pointer-events: none;
  opacity: 0.6;
}
<divclass="y"><inputtype="checkbox"class="myCheck" /><inputtype="text"tabindex="-1"name="x"class="mySelect" /></div><divclass="y"><inputtype="checkbox"class="myCheck" /><inputtype="text"tabindex="-1"name="x"class="mySelect" /></div><divclass="y"><inputtype="checkbox"class="myCheck" /><inputtype="text"tabindex="-1"name="x"class="mySelect" /></div>

Tab Issue

In order to stop someone from tabbing into the input, you can add tabindex="-1" to the input.

Post a Comment for "Disable Input On Check Checkbox"