Disable Input On Check Checkbox
Need to disable an input when the check-box is unchecked, and when it is checked enable it. My code is like this:
Copy
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="select" name="x" class="mySelect" />
</div>
References
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;
}
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="text" tabindex="-1" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="text" tabindex="-1" name="x" class="mySelect" />
</div>
<div class="y">
<input type="checkbox" class="myCheck" />
<input type="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"