チェックボックスが有効な場合、jQueryは他の行の入力を無効にします

Question

チェックボックスをオンにすると、入力を有効/無効にしたいとします。私は同じ構造の私のサイトに多くのセクションがあるので、私は使用する必要があることを知っている

this 

建設。私はこのようなことを試みたが、うまくいかなかった。誰でも私を助けることができますか？

$('.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

最も近い.row十分ではありません。あなたはDOMの上に1つ以上の層を踏んでいく必要があります。私が知っている

$('.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>