JQuery:多个复选框以禁用多个文本框

Question

我的表单中有多个复选框; 每个都禁用特定的文本框.

目前我的形式是这样的.

$("#check1").click(function() {
    $("#text1").attr('disabled',! this.checked)
});


$("#check2").click(function() {
    $("#text2").attr('disabled',! this.checked)
});

...
...
...

关于我如何缩短这一点的任何提示？我认为每个复选框和文本框有一行代码似乎太多,重复和冗余.先感谢您.

Answer 1

你可以这样做:

$("#check1, #check2, #check3").click(function() {
    var textId = "#" + this.id.replace("check", "text");
    $(textId).attr('disabled',! this.checked)
});

要么

$(":checkbox[id^=check]").click(function() {
    var textId = "#" + this.id.replace("check", "text");
    $(textId).attr('disabled',! this.checked)
});

...如果您没有任何复选框,其ID以"检查"开头,您不希望将其包含在选择器中.

基本上,任何能够识别相关复选框的选择器都可以工作,然后只需操作ID即可.

更新:可能您可以完全取消ID,具体取决于您的HTML结构.例如,给定这种形式:

<form id='foo'>
  <label><input type='checkbox'>Field 1</label>
  <br><input type='text' size='40' disabled>
  <br><label><input type='checkbox'>Field 2</label>
  <br><input type='text' size='40' disabled>
  <br><label><input type='checkbox'>Field 3</label>
  <br><input type='text' size='40' disabled>
  <br><label><input type='checkbox'>Field 4</label>
  <br><input type='text' size='40' disabled>
</form>

......我们可以达到预期的效果:

$("#foo input[type=checkbox]").click(function() {
  var next = $(this).parent().nextAll('input[type=text]:first');
  next.attr("disabled", !this.checked);
});

实例