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);
});

Live example

Answer 2

如果您可以更改HTML结构，则可以执行以下操作：

$(".check").click(function() {
    var index = $(this).index(".check");
    $(".text:eq("+index+")").attr('disabled',! this.checked)
});

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

2 个答案: