一個小星期五爲你處理所有。
我,使輸入的jquery的以下位只讀在基於與另一個輸入的選擇:
這工作好得很,以及如何我想它的工作。
但是,在我的情況下,我有大約13「checkbox1a」與他們相關的checkbox1b & textbox1。
從腳本中可以看出,我可以複製此代碼,但衆所周知,複製和粘貼是不好的(儘管在星期五下午有上訴),所以我想知道如何才能攻擊這個我可以儘量減少代碼,但達到相同的結果,
任何指標非常讚賞。
一個小星期五爲你處理所有。
我,使輸入的jquery的以下位只讀在基於與另一個輸入的選擇:
這工作好得很,以及如何我想它的工作。
但是,在我的情況下,我有大約13「checkbox1a」與他們相關的checkbox1b & textbox1。
從腳本中可以看出,我可以複製此代碼,但衆所周知,複製和粘貼是不好的(儘管在星期五下午有上訴),所以我想知道如何才能攻擊這個我可以儘量減少代碼,但達到相同的結果,
任何指標非常讚賞。
只需添加一些類和做一點jQuery的巫術。請參閱jsfiddle。
可以不將類添加到已禁用/已啓用的控件,但使用對啓用/禁用的內容有更細粒度控制的類。
您可以在一個click事件寫下所有這些..
var $tr = $(this).closest('tr');
// access checkbox b inside it
$tr.find('[id*=checkbox][id$="b"]').attr('disabled', 'disabled');
// access textbox inside it
$tr.find('input[type="text"]').attr('disabled', 'disabled');
你可以寫一個單一的點擊事件來處理所有的複選框,單擊事件這樣。
更好的是爲給類複選框,而不是ID對他們..
複選框中 - 類=「checkboxa」 複選框b - 類=「checkboxb」 文本 - 類=「文本框」
這將會使你的代碼更清潔,更容易處理......
謝謝Sushanth。好東西。 –
@RicardoDeano ..不客氣:) –
您可將所有進入一個變化事件 - 假設這些都是你在頁面上唯一的複選框..或者你可以通過
$('input[type=checkbox]').change(function(){
var $this = $(this);
var $inputs = $this.closest('tr').find('input'); // get relative inputs
$inputs.not($this).prop('disabled',$inputs[0].checked);
// disable fields if first checkbox is checked
});
也給他們一個類來選擇它們prop是設置禁用屬性(jQuery 1.6+)的正確方法。這是從jQuery文檔
應該使用.prop()方法來設置禁用和檢查,而不是.attr()方法。
好的答案和歡呼的道具指針。 –
我剛剛解決了類似的問題。下面是我如何處理它:
添加類的複選框和文本框,然後將ID的指數移動到字符串的結尾(使得它更容易jQuery的),所以它可以是這樣的:
這裏的fiddle link
<table>
<tr>
<td><input class="checkboxa" type="checkbox" name="input1" id="checkboxa1"/> </td>
<td><input class="checkboxb" type="checkbox" id="checkboxb1" /></td>
<td> <input type="text" id="texbox1" /></td>
</tr>
<tr>
<td><input class="checkboxa" type="checkbox" name="input2" id="checkboxa2"/> </td>
<td><input class="checkboxb" type="checkbox" id="checkboxb2" /></td>
<td><input type="text" id="texbox2" /></td>
</tr>
</table>
使用這種方法,JQuery的直接對象的控制,而不是必須上下竄動的DOM試圖找到控制與「最接近」或「發現」。
$(function() {
$('.checkboxa').click(function() {
var index = $(this).attr('id').toString().substring(9);
$('#checkboxb' + index).attr('disabled', $('#checkboxa' + index)[0].checked);
$('#texbox' + index).prop('disabled', $('#checkboxa' + index)[0].checked);
});
});
愛那個巫毒! –