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开始“检查”，你不希望包含任何复选框在选择器中。

基本上，任何标识问题复选框的选择器都可以工作，然后它只是一个操纵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) 
});