为什么复选框总是返回相同的值
Why does a checkbox always return the same value?
Edit3:在更多人继续对此投反对票之前,请注意这不是一个重复的问题。
我正在一个需要一张装满复选框的表格的网站上工作,每个复选框都需要打开/关闭。有时打开一个需要关闭其他,依此类推。
我没有构建基本代码,但由于所有逻辑都相当混乱,我决定做一些像无线电一样的工作,所以我们只有一个基本函数来使大部分逻辑工作。
我还有一个功能来启用/禁用某些复选框。一切都很好,完全没有问题。
但是现在还有另一件事在起作用,那就是文本输入。如果在其中选择了某个值,则某些复选框会自动打开/关闭并锁定。相同的基本函数用于执行此操作。但是,当复选框被禁用,然后重新启用时,以下函数始终仅针对该复选框返回 true:
$('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');
}
}
}
当我删除名称属性的上述代码时,该复选框工作正常。然而,尽管其他每个复选框都返回正确选中/未选中,但当单击该特定的未禁用复选框时,它始终返回"已选中"。
我之前使用 is(":checked"(,更改为道具没有区别。
编辑:正如评论中所说,使用道具或attr并没有区别。这是锁定"卡住"复选框的代码:
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
}
}
编辑2:在尝试马文答案后,我得到了一个略有不同的结果,可以帮助找出问题所在:
此卡住的复选框具有"已选中"和"已禁用"状态。单击重置按钮时,禁用将被删除,但它仍处于选中状态(或应该选中(。当我尝试在重置后单击带有上述代码的复选框时,就像它被重新选中一次,然后一直处于选中状态。
使用 [0].disabled = false,我可以继续打开和关闭复选框,但没有为 js 激活它,并且每次单击仍然返回选中状态。
编辑4:尝试使用
toggle_checkbox(toggles_type, 'disabled');
toggle_checkbox(toggles_type, 'enabled');
在使复选框卡住的代码中(上面的set_hint_toggles(关闭(功能(,它仅被禁用。之后,此复选框始终返回 false 而不是始终为 true。
提示可以用来改进你的代码。没有jsfiddle或一些例子,恐怕我不能比这更能帮助你。您应该尝试使用 DOM 本机 api 来设置禁用的项目
$('input[value="'+toggle+'"]')[0].disabled //returns if the element is disabled
$('input[value="'+toggle+'"]')[0].disabled = true //set element as disabled or not
这同样适用于已检查的属性。
$('input[value="'+toggle+'"]')[0].checked //returns if the element is checked
$('input[value="'+toggle+'"]')[0].checked = true //set element as checked or not
在我发布的第一个代码块中确实有问题。我现在根据 Adeneo 关于更改选择器的建议使用它,并且它运行良好:
// Search checkbox toggles
$('input[type="checkbox"]').change(function() {
// Make checkboxes with names work like radios (radios can't be toggled off)
if ($(this).attr("name")) {
if (this.checked) {
$('[name='+ this.name +']').each(function() {
toggle_disabled( this.value, 'disabled');
});
toggle_disabled( this.value, 'enabled', 'on');
}
else {
$('[name='+ this.name +']').each(function() {
toggle_disabled( this.value, 'enabled');
});
$(this).parent().toggleClass("on");
}
}
// Else if no name, just toggle on class
else {
$(this).parent().toggleClass("on");
}
});
我相信问题出在用于测试复选框是否打开的选择器中。
我现在也在其他所有东西上使用道具,但这并没有改变任何东西,似乎与问题完全无关。其他建议也没有做任何事情。
- 使用jQuery只返回选中复选框后的第一个表单元格值
- 选择一个从 mysql 返回选中/未选中复选框的对象
- Yui Get 复选框返回数组而不是布尔值
- html5复选框返回“;关于“;值,而不是我设置的值
- Javascript使用each()为复选框返回正确的值
- 如果在jQuery中选中,则返回多个复选框值
- 当用户检索表单时返回选中的复选框(Coldfusion)
- 返回:使用is()选中复选框值
- 如何使复选框项目返回超链接
- 在jquery或javascript或angular中单击单选按钮或复选框后返回呼叫
- 在复选框的索引中返回 1
- HTML 复选框返回值
- HTML 复选框 Click() 使用 jQuery 返回 FALSE 或 TRUE,而不是 READONLY 或 DI
- 为什么复选框总是返回相同的值
- 复选框值始终返回 false
- Javascript - 从复选框返回值
- 复选框,并尝试在用户返回时为用户保存所有复选框的状态
- 如果从可能的复选框列表中只选中了一个特定的复选框,则返回 Javascript
- jquery和ajax.如何检索此字段的数据并返回到右侧复选框
- 输入复选框总是返回false