如果选中复选框，jquery 将禁用下一个元素

Question

如果选中复选框，如何禁用文本框。我有一些彼此相邻的文本框和复选框。

HTML:

<form id="form">
<input type="checkbox" name="deposit_checked"> <input type="text" name="deposit_value">
<input type="checkbox" name="booking_checked"> <input type="text" name="booking_value">
<input type="checkbox" name="referral_checked"> <input type="text" name="referral_value">
</form>

我可以使用下面的代码单独完成:

$("input[name=deposit_checked]").change(function(){

if( $("input[name=deposit_checked]").is(":checked") ) {
    $("input[name=deposit_value]").attr("disabled", false);
} else {
    $("input[name=deposit_value]").attr("disabled", true);
}

})

为了节省时间，我尝试使用 .each() 和 .next() 函数，但没有成功:

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){
   if( $(this).is(":checked") ) {
  $(this).next().attr("disabled", false);
   } else {
  $(this).next().attr("disabled", true);
   }
})
})

Answer 1

为了最大限度地减少 DOM 对象选择，请用诸如 span 之类的内容覆盖输入。

您可以在此处查看此示例:http://jsfiddle.net/g4mQR/

<form id="form">
  <span>
    <input type="checkbox" name="deposit_checked"> 
    <input type="text" name="deposit_value">
  </span>
  <span>
    <input type="checkbox" name="booking_checked"> 
    <input type="text" name="booking_value">
  </span>
  <span>
    <input type="checkbox" name="referral_checked"> 
    <input type="text" name="referral_value">
  </span>
</form>

JS代码

$('#form input[type=checkbox]').click(function(){
  var obj = $(this).siblings('input[type=text]');
  obj.attr('disabled', !obj.attr('disabled'));
})