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