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

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

Answer 3

这应该做：

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

请记住在开头设置字段'和复选框'的状态。例如：所有未选中和已禁用。

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

Answer 4

我想你想要隐藏n显示与其复选框相对应的texbox，所以你可以通过附加更改事件来完成此操作，这是如何完成的：每次更改复选框的值时，都会触发change事件处理程序

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

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

  });
});

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

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

4 个答案: