使用复选框切换最近输入的 class
Use a checkbox to toggle class of closest input
我有一个包含一系列输入字段的表单 - 每个输入字段都有一个 'Unavailable' 选项。我正在尝试设置它,以便 CSS class (禁用)可以应用于复选框最接近的输入,而不是尝试为每对 [=29= 编写事件].
或者我可以将只读属性应用于输入本身,但我不确定这是否可行。
我目前的尝试:
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");
});
像这样的东西应该可以工作
$('.unavailable').change(function() {
$(this).prev("input[type=text]").toggleClass("disabled");
});
我还将 display:none
更改为 visibility:hidden
,因此复选框会随着文本输入的隐藏而移动。
然而,为了友好的界面,我会切换输入的禁用属性。这样输入将被禁用,但只是变灰,而不是完全删除。这将是一个比完全隐藏框更熟悉的界面功能。
$('.unavailable').change(function() {
var i = $(this).prev("input[type=text]"),
d = i.attr("disabled");
i.attr("disabled", !d);
});
你应该使用
$(this).closest('div').find('input').toggleClass("disabled");
这将解决您的问题
$('.unavailable').change(function() {
$(this).parent().find('input[type="text"]').toggleClass("disabled");
});
我有一个包含一系列输入字段的表单 - 每个输入字段都有一个 'Unavailable' 选项。我正在尝试设置它,以便 CSS class (禁用)可以应用于复选框最接近的输入,而不是尝试为每对 [=29= 编写事件].
或者我可以将只读属性应用于输入本身,但我不确定这是否可行。
我目前的尝试:
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");
});
像这样的东西应该可以工作
$('.unavailable').change(function() {
$(this).prev("input[type=text]").toggleClass("disabled");
});
我还将 display:none
更改为 visibility:hidden
,因此复选框会随着文本输入的隐藏而移动。
然而,为了友好的界面,我会切换输入的禁用属性。这样输入将被禁用,但只是变灰,而不是完全删除。这将是一个比完全隐藏框更熟悉的界面功能。
$('.unavailable').change(function() {
var i = $(this).prev("input[type=text]"),
d = i.attr("disabled");
i.attr("disabled", !d);
});
你应该使用
$(this).closest('div').find('input').toggleClass("disabled");
这将解决您的问题
$('.unavailable').change(function() {
$(this).parent().find('input[type="text"]').toggleClass("disabled");
});