divの内部にある次の入力フィールドを無効にして有効にします

Question

チェックボックスをオンまたはオフにした後、次の入力を有効にしたり無効にしたりするにはどうすればいいですか？
私はjQueryで試していますnextAllしかし、divが要素を含む場合、これは機能しません。私のHTML：

$(document).ready(function() 
{ 
    $('.box').change(function() 
    { 
     var set = $(this).is(':checked') ? false : true; 
     $(this).nextAll('div.box-2 input').first().attr('disabled', set); 
    }); 
}); 

私が知っている何かが間違っているのですが、私はそれを動作させることはできません。

<input class='box' type='checkbox'/>Option - 
<div class='box-2' style='display: inline-block'> 
    Quantity <input type='number' disabled/> 
</div> 
<input class='box' type='checkbox'/>Option 2 - 
<div class='box-2' style='display: inline-block'> 
    Quantity <input type='number' disabled/> 
</div> 

は、私が実際には次のjQueryをしようとしています。 JS Fiddle here

Answer 1

あなたは、チェックボックス（あなたのケースではDIV）後とした後、次の要素を見つけるためにnext()機能を使用する必要がありますこのの入力がこのdiv内にあります。あなたのケースでは

$(document).ready(function() 
 
{ 
 
    $('.box').click(function() 
 
    { 
 
     var set = $(this).is(':checked') ? false : true; 
 
     $(this).next('div.box-2').find('input').attr('disabled', set) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class='box' type='checkbox'/>Option - 
 
<div class='box-2' style='display: inline-block'> 
 
    Quantity <input type='number' disabled/> 
 
</div> 
 
<input class='box' type='checkbox'/>Option 2 - 
 
<div class='box-2' style='display: inline-block'> 
 
    Quantity <input type='number' disabled/> 
 
</div>

Answer 2

next('.box-2')を使用し、その後にinputを見つける必要があります。

HTML：

<input class='box' type='checkbox'/>Option - 
<div class='box-2' style='display: inline-block'> 
    Quantity <input type='number' disabled/> 
</div> 
<input class='box' type='checkbox'/>Option 2 - 
<div class='box-2' style='display: inline-block'> 
    Quantity <input type='number' disabled/> 
</div> 

のjQuery：

$(document).ready(function(){ 
    $('.box').change(function(){ 
     var el = $(this).next('.box-2').find('input'); 
     if($(this).is(':checked')){ 
      el.prop('disabled', false); 
     } 
     else{ 
      el.prop('disabled', true); 
     } 
    }); 
}); 

の作業例：https://jsfiddle.net/Lvf7znxm/4/

Answer 3

、u）は（.next使用する必要があります。 .next（）は次の要素をフェッチし、その要素に対して任意の操作を実行できます。

$('.box').click(function() 
{ 
    var set = $(this).is(':checked') ? false : true; 
    $(this).next('div.box-2').find('input').attr('disabled', set) 
});