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

Question

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

目前我的表单中有此内容。

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


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

...
...
...

关于如何缩短这个时间有什么建议吗？我认为每个复选框和文本框都有 1 行代码似乎太多、重复和冗余。预先感谢您。

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 以“check”开头的复选框。

基本上，任何能够识别相关复选框的选择器都可以工作，然后只需操作 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);
});

Live example