如果选中复选框，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

您为 disabled 属性设置了错误的值。这是修复方法：

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

这是 jsfiddle 上的工作示例。请注意，所有 javascript 都应在 $(window).load() 处理程序中声明。

Answer 2

应该这样做：

$('#form input[type="checkbox"]').change(function() {
   var t = $(this);
    t.next().attr('disabled', ! t.is(':checked'));
});

记住在开始时设置字段和复选框的状态。例如：全部不勾选并禁用。

+您可能想要更改选择器中的#form 位。

Answer 3

我猜你想隐藏并显示与其复选框相关的文本框，所以你可以通过附加更改事件来做到这一点，这是如何完成的：
每次更改复选框的值时都会触发 change 事件处理程序

$(document).ready(function() {
   $('.chkboxClass').bind('change', function () {

   if ($(this).is(':checked'))
     $(this).next('.txtboxclass').hide();
   else
     $(this).next('.txtboxclass').show();

  });
});

，其中 .chkboxclass 是所有复选框的类，.txtboxclass 是所有文本框

Answer 4

为了最大限度地减少 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'));
})