2012-10-05 63 views
0

下午所有。如何重構jquery「只讀基於複選框選擇」

一個小星期五爲你處理所有。

我,使輸入的jquery的以下位只讀在基於與另一個輸入的選擇:

I really do like jsfiddle

這工作好得很,以及如何我想它的工作。

但是,在我的情況下,我有大約13「checkbox1a」與他們相關的checkbox1b & textbox1。

從腳本中可以看出,我可以複製此代碼,但衆所周知,複製和粘貼是不好的(儘管在星期五下午有上訴),所以我想知道如何才能攻擊這個我可以儘量減少代碼,但達到相同的結果,

任何指標非常讚賞。

回答

1

只需添加一些類和做一點jQuery的巫術。請參閱jsfiddle

可以不將類添加到已禁用/已啓用的控件,但使用對啓用/禁用的內容有更細粒度控制的類。

+0

愛那個巫毒! –

1

您可以在一個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'); 

Check FIDDLE

你可以寫一個單一的點擊事件來處理所有的複選框,單擊事件這樣。

更好的是爲給類複選框,而不是ID對他們..

複選框中 - 類=「checkboxa」 複選框b - 類=「checkboxb」 文本 - 類=「文本框」

UPDATED FIDDLE WITH CLASSES

這將會使你的代碼更清潔,更容易處理......

+0

謝謝Sushanth。好東西。 –

+0

@RicardoDeano ..不客氣:) –

1

您可將所有進入一個變化事件 - 假設這些都是你在頁面上唯一的複選框..或者你可以通過

$('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 
}); 

http://jsfiddle.net/EEuUw/

也給他們一個類來選擇它們prop是設置禁用屬性(jQuery 1.6+)的正確方法。這是從jQuery文檔

應該使用.prop()方法來設置禁用和檢查,而不是.attr()方法。

+0

好的答案和歡呼的道具指針。 –

0

我剛剛解決了類似的問題。下面是我如何處理它:

添加類的複選框和文本框,然後將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); 
    }); 
});​