使用複選框切換最接近的輸入類

Question

我有一系列輸入字段的表單 - 每個輸入字段都有一個「不可用」選項。我試圖設置它，以便可以將CSS類（禁用）應用於複選框最接近的輸入，而不是嘗試爲每對複選框/輸入寫入事件。

或者我可以將只讀屬性應用於輸入本身，但我不確定這是可能的。

我目前的嘗試：

HTML：

<div> 
Input: <input type="text" name="something" id="_1" /> 
unavailable? <input type ="checkbox" class="unavailable" name="check" />  
</div> 
<div> 
Input: <input type="text" name="something" id="_2" /> 
unavailable? <input type ="checkbox" class="unavailable" name="check" />  
</div> 
<div> 
Input: <input type="text" name="something" id="_3" /> 
unavailable? <input type ="checkbox" class="unavailable" name="check" />  
</div> 

jQuery的

$('.unavailable').change(function() { 
    $(this).closest(input).toggleClass("disabled"); 
}); 

Jsfiddle of attempt

Answer 1

像這樣的東西應該工作

$('.unavailable').change(function() { 
    $(this).prev("input[type=text]").toggleClass("disabled"); 
}); 

我也將display:none更改爲visibility:hidden，所以複選框會隨着文本輸入被隱藏而改變。

fiddle

對於一個界面友好的緣故不過，我會切換輸入的disabled屬性。這樣輸入將被禁用，但只是變灰，並沒有完全移除。這將是比較熟悉的界面功能，而不是隱藏框。

$('.unavailable').change(function() { 
    var i = $(this).prev("input[type=text]"), 
     d = i.attr("disabled"); 
     i.attr("disabled", !d); 
}); 

fiddle

Answer 2

您應該使用

$(this).closest('div').find('input').toggleClass("disabled"); 

Answer 3

這將解決您的問題，爲您的幫助和想法

$('.unavailable').change(function() { 
    $(this).parent().find('input[type="text"]').toggleClass("disabled"); 
});