javascript - 禁用和启用 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>