Question

我有2个标签键和原声吉他的复选框。当用户选择一个时，我想要禁用另一个。我已经能够实现这一点，但是，我遇到的问题是当用户取消选择时 - 另一个仍然被禁用。

例如，如果用户选择＆＃39;键，＆＃39;原声吉他＆＃39;禁用，如果用户然后取消选中＆＃39;键，＆＃39;原声吉他＆＃39;仍然保持禁用 - 我需要它，以便在没有选中时，您可以随时选择。

这是我的代码：

// disable acoustic guitar when keys is selected
$("input[class='checkbox keys']").on('change', function () {
    if ($("input[class='checkbox keys']").length) {
        $("input[class='checkbox acou_guit']").prop('disabled',true);
        return;
    } else {
        $("input[class='checkbox acou_guit']").prop('disabled',false);
        return;
    }
});

// disable keys when acoustic guitar is selected
$("input[class='checkbox acou_guit']").on('change', function () {
    if($("input[class='checkbox acou_guit']").length) {
        $("input[class='checkbox keys']").prop('disabled',true);
        return;
    } else {
        $("input[class='checkbox keys']").prop('disabled',false);
        return;
    }
});

Answer 1

使用length属性可能会遇到奇怪的行为。建议改为使用prop：

而不是：

if($("input[class='checkbox acou_guit']").length) { }

尝试：

if($(this).prop("checked")) { }

这可能无法通过复制粘贴解决您的问题。但是，它应该向您发送正确的方向。

Answer 2

在这种情况下，您的代码是错误的。你应该检查所选复选框的长度，而不仅仅是复选框。

$("input[class='keys']").on('change', function () {
    var checked = $("input[class='keys']:checked").length === 1 ? true : false;
        $("input[class='acou_guit']").prop('disabled',checked);

});

// disable keys when acoustic guitar is selected
$("input[class='acou_guit']").on('change', function () {
    var checked = $("input[class='acou_guit']:checked").length === 1 ? true : false;
        $("input[class='keys']").prop('disabled',checked);

});

http://jsfiddle.net/FL47b/

如果答案是正确的，请将答案标记为正确

当选择另一个时，jQuery禁用一个复选框

2 个答案: