禁用并启用div内的下一个输入字段

问题描述：

如何在选中或取消选中复选框后启用和禁用一个div内的下一个输入？
我正在尝试使用jQuery nextAll，但如果div涉及元素，则不起作用。我的HTML：禁用并启用div内的下一个输入字段

<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

尝试'.prop（'disabled'，true）;'复选框 –

答

您需要使用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>

现在工作很好。感谢您的解决方案和解释。 – Hypister

我现在注意到，如果我使用标签元素，它不起作用：https://jsfiddle.net/Lvf7znxm/5/ 请参阅选项2输入。 – Hypister

@Hypister是正确的，因为现在'next（）'函数指的是'选项2 -'（但你需要box-2）。这只会在您删除此标签标签时起作用。 – semanser

答

您必须使用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/

谢谢您的回答，但是这也会禁用复选框。 – Hypister

@showdev问题是，当我检查/取消选中靠近它的复选框时，box-2 div内的输入字段未被禁用或启用。 – Hypister

@Hypister我更新了代码，再试一次。 –

答

在你的情况下，U应该使用的.next（）。 .next（）将获取下一个元素，并且您可以对该元素执行任何操作。

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

禁用并启用div内的下一个输入字段

相关推荐