使用复选框切换最接近的输入类

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