禁用並啓用div內的下一個輸入字段

Question

如何在選中或取消選中複選框後啓用和禁用一個div內的下一個輸入？
我正在嘗試使用jQuery nextAll，但如果div涉及元素，則不起作用。我的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 set = $(this).is(':checked') ? false : true; 
     $(this).nextAll('div.box-2 input').first().attr('disabled', set); 
    }); 
}); 

我知道什麼是錯的，但我不能使它發揮作用。 JS Fiddle here

Answer 1

您需要使用next()功能找到下一個元素複選框後，（在你的情況DIV）和後那find()這個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) 
});