复选框处于活动状态时，jQuery禁用其他行中的输入

Question

I want to enable/disable input when checkbox is checked. I have many sections in my site with the same structure so I know I need to use

this

construction. I tried to do something like this but it doesn't work. Anyone could help me?

 $('.component-other').on('click', function(){ var isChecked = $(this).is(':checked'); if (isChecked) { $(this).closest('.row').find('.component-other-value').prop("disabled", false); } else { $(this).closest('.row').find('.component-other-value').prop("disabled", true); } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <label for="sause-oth">Other</label> <input type="checkbox" name="sause" id="sause-oth" class="enable component-other"> </div> </div> <div class="row input-row"> <div class="col-sm-12"> <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here"> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <label for="sause-oth">Other</label> <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other"> </div> </div> <div class="row input-row"> <div class="col-sm-12"> <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here"> </div> </div> </div> </section> 

Answer 1

The closest .row is not enough. You have to step one more layer up the DOM.

 $('.component-other').on('click', function(){ $(this).closest('.container') .find('.component-other-value') .prop("disabled", !this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <label for="sause-oth">Other</label> <input type="checkbox" name="sause" id="sause-oth" class="enable component-other"> </div> </div> <div class="row input-row"> <div class="col-sm-12"> <input type="text" name="sause-other" id="sause-other" class="component-other-value" disabled="disabled" placeholder="Type text here"> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <label for="sause-oth">Other</label> <input type="checkbox" name="sause" id="sause-oth-1" class="enable component-other"> </div> </div> <div class="row input-row"> <div class="col-sm-12"> <input type="text" name="sause-other" id="sause-other-1" class="component-other-value" disabled="disabled" placeholder="Type text here"> </div> </div> </div> </section>