disable input on check checkbox

Question

Need to disable an input when the check-box is unchecked, and when it is checked enable it.

My code is like this:

<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>

But I want to disable and enable the select input which correspond to a check-box. If user clicks in first check box enable first input, and do the same for second and third.

Alex Char · Accepted Answer · 2014-10-16 16:51:23Z

10

One simple solution:

$(".mySelect").prop("disabled", true);

$("input:checkbox").on("change", function () {
    $(this).next().prop("disabled", !$(this).prop("checked"));
});

<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

.next()

.prop()

edited Oct 16, 2014 at 16:51

answered Oct 16, 2014 at 16:32

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lee_gladding Over a year ago

OP wanted the inverse of this.. need to change to !$(this).prop("checked")

Wavemaster Over a year ago

With input.mySelect:disabled { background: #eee; } you can dim the disabled input fields. Feel free to alter this CSS at your needs.

Hunter Turner · Accepted Answer · 2018-02-28 17:21:04Z

1

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.

edited Feb 28, 2018 at 17:21

answered Feb 28, 2018 at 17:08

Hunter Turner

6,94411 gold badges43 silver badges57 bronze badges

Collectives™ on Stack Overflow

disable input on check checkbox

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related