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

时间:2015-04-02 18:05:19

标签: jquery toggle

我有一个包含一系列输入字段的表单 - 每个字段都有一个“不可用”字样。选项。我试图设置它,以便CSS类(禁用)可以应用于复选框最接近的输入,而不是尝试为每对复选框/输入写入事件。

或者我可以将readonly属性应用于输入本身,但我不确定这是否可能。

我目前的尝试:

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

3 个答案:

答案 0 :(得分:2)

这样的事情应该有效

$('.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

答案 1 :(得分:0)

你应该使用

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

答案 2 :(得分:0)

这将解决您的问题

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