2017-12-31 152 views
0

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

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>

+0

@Andreas。私は2つのセクションを作るために要素をコピーしました – MMPL1

答えて

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>

+0

ありがとう!これは私が欲しいものです! – MMPL1

関連する問題