Edit3: 在更多人继续关注此事件之前,请注意这是一个重复的问题 not .
我正在一个需要一个充满复选框的桌面的网站上工作,每个网站都需要打开/关闭 . 有时切换一个需要关闭其他人等等 .
我没有构建基本代码,但由于所有逻辑都很混乱,我决定做一些像无线电这样的工作,所以我们只有一个基本功能来完成大部分逻辑工作 .
我还有一个启用/禁用某些复选框的功能 . 这一切都很好,没有任何问题 .
但现在还有另一件事就是文字输入 . 如果在其中选择了某个值,则某些复选框会自动打开/关闭并锁定 . 使用相同的基本功能来执行此操作 . 但是当一个复选框被禁用时,然后重新启用,以下函数将始终返回true only for that checkbox :
$('input[type="checkbox"]').change(function() {
// Make checkboxes with names work like radios (radios can't be toggled off)
if ($(this).attr("name")) {
// Save clicked toggle value
var selected_toggle = $(this).attr('value');
// disable all and then toggle clicked one on
if ($('input[value="'+selected_toggle+'"]').prop("checked")) {
console.log("This is checked");
$('input:checkbox[name='+$(this).attr('name')+']').each(function() {
toggle_checkbox($(this).attr('value'), 'disabled');
});
toggle_checkbox(selected_toggle, 'enabled', 'on');
}
// Enable them all back if unchecking
else {
console.log("This is unchecked");
$('input:checkbox[name='+$(this).attr('name')+']').each(function() {
toggle_checkbox($(this).attr('value'), 'enabled');
});
$(this).parent().toggleClass("on");
}
}
else {
// Toggle them on or off
$(this).parent().toggleClass("on");
}
});
显而易见的是,“在锁定/解锁该复选框时,某些内容会有所不同”,但它的功能完全相同,所有其他切换都被禁用,这与toggle_checkbox函数一样:
function toggle_checkbox(toggle, value, on, lock) {
// Disable the toggle completely
if (value == 'disabled') {
$('input[value="'+toggle+'"]').attr('disabled', 'disabled');
$('input[value="'+toggle+'"]').parents('li').addClass('disabled');
$('input[value="'+toggle+'"]').parent().removeClass('on');
$('input[value="'+toggle+'"]').prop('checked', false);
}
// Enable a toggle back
if (value == 'enabled') {
$('input[value="'+toggle+'"]').parents('li').removeClass('disabled');
// Turn it on
if (on == 'on') {
$('input[value="'+toggle+'"]').parent().addClass('on');
$('input[value="'+toggle+'"]').prop('checked', true);
}
// Lock it on or remove disabled
if (lock == 'lock') {
$('input[value="'+toggle+'"]').attr('disabled', 'disabled');
}
else {
$('input[value="'+toggle+'"]').removeAttr('disabled');
}
}
}
当我删除名称属性的上述代码时,该复选框工作正常 . 然而,每个其他复选框都会正确返回Checked / unchecked,当单击特定的未禁用复选框时,它始终返回“已选中” .
之前我正在使用is(“:checked”),改为prop没有任何区别 .
Edit: 正如评论中所说,使用prop或attr没有任何区别 . 这是锁定获得"stuck"的复选框的代码:
function set_hint_toggles(type, state) {
if (type == 'apples') { // Set when you select something with apples
toggle_checkbox('pears', 'disabled');
toggle_checkbox('apples', 'enabled', 'on', 'lock');
toggle_checkbox('oranges', 'disabled');
}
if (state == 'off') { // This is set when a reset button is pressed
var toggles_type = $('#hidden-input-with-value').val();
toggle_checkbox(toggles_type, 'enabled'); // This checkbox gets stuck, all others continue working
$('#text-input').removeAttr("disabled"); // Allows to type something again
}
}
Edit2: 在尝试马文回答后,我得到了一个略有不同的结果,可以帮助找出错误:
这个卡住的复选框具有“已检查”和“已禁用”状态 . 单击重置按钮时,将禁用禁用,但仍会检查(或应该) . 当我在重置后尝试使用上面的代码单击复选框时,它就像重新检查了一次,然后一直处于检查状态 .
使用[0] .disabled = false,我可以继续打开和关闭复选框,但是没有为它激活js,并且每次点击仍然返回选中状态 .
Edit4: 尝试使用时
toggle_checkbox(toggles_type, 'disabled');
toggle_checkbox(toggles_type, 'enabled');
在使复选框卡住的代码中(上面的set_hint_toggles(off)函数),它仅被禁用 . 之后,此复选框始终返回false而不是始终为true .
2 回答
这是一个小问题,你可以用它来改善你的代码..没有jsfiddle或一些例子,我担心我不能帮助你更多 . 您应该尝试使用DOM native api来设置禁用的项目
同样适用于checked属性 .
在我发布的第一个代码块中确实出了问题 . 我现在正在使用这个基于Adeneo关于改变选择器的建议而且它的工作完美:
我相信问题出现在用于测试的选择器上,如果复选框已打开 .
我现在也在其他一切上使用道具,但这并没有改变任何东西,似乎根本不会与问题有关 . 其他建议也没有做任何事情 .