Question

$(document).ready(function() {
            $("input:txtAge1").click(function(event) {
                if ($(txtAge1).attr("checked") == true) {
                    $(txtAge2).attr("checked", "unchecked");
                    $(txtAge2).attr("checked") == false)
                } 

                if ($(txtAge2).attr("checked") == true) {
                    $(txtAge1).attr("checked", "unchecked");
                    $(txtAge1).attr("checked") == false)
                }
            });
});



<input type="checkbox" id="txtAge1" name="option1" value=""/>21<br>
<input type="checkbox" id="txtAge2" name="option2" value=""/>55<br>

我正在尝试选择一个复选框或另一个复选框。因此，如果一个框是UNchecked，则应该不允许或强制使用要检查的其他框...换句话说，强制执行其中一个但永远不允许一个“未定义”的条件

Answer 1

也许我对这个问题感到沮丧，但为什么不尝试使用单选按钮呢？

您可以将其设置为selected，以避免用户提交空值。

更新：由于您的客户想要复选框，这里是jQuery中的解决方案：

$(document).ready(function(){
   $('.radioButton').click(function() {
      $('.radioButton').prop("checked", false);
      $(this).prop("checked", true);
   });
});

这是jQuery代码。您应该将输入框设置为：

<input type="checkbox" id="txtAge1" class="radioButton" name="option1" value=""/>21
<input type="checkbox" id="txtAge2" class="radioButton" name="option2" value=""/>55

这应该有用，但它没有经过测试。我可能会错过一些东西。

Answer 2

一种解决方案是添加两个点击事件，每个复选框一个。单击一个时，另一个未被单击。

$("#checkbox1").click(function() {
    $("#checkbox2").prop('checked', false);
});

$("#checkbox2").click(function() {
    $('#checkbox1').prop('checked', false);
});

Answer 3

我最近遇到了这个问题，除了我需要复选框而不是单选按钮，因为需要取消选中这两个选项。我用这样的东西解决了它（适应OP的代码）：

<input type="checkbox" id="txtAge1" />21
<input type="checkbox" id="txtAge2" />55

$(document).ready({
    $("#txtAge1").click(function() {
        if($("#txtAge1").is(':checked')) {
            $("#txtAge2").prop('checked', false);
        }
    });
    $("#txtAge2").click(function() {
        if($("#txtAge2").is(':checked')) {
            $("#txtAge1").prop('checked', false);
        }
    });
)};

可能不那么漂亮，但它确实有效。

Answer 4

我还想在这里注意到优秀的链接http://rndnext.blogspot.com/2009/08/mutually-exclusive-html-select-elements.html。

虽然有一点需要注意，我用它来互换div中两个动态生成的选择列表。。由于要处理的内容在页面加载时不可用，因此无法按预期工作。以下解决方案jQuery - selecting dynamically created divs有助于解决问题。

Answer 5

我会使用这个功能。允许互斥并允许取消选中：

$('#divId').find(':checkbox').click(function() {
         var state=$(this).prop("checked");
         $(':checkbox').prop("checked", false);
         $(this).prop("checked", state);
    });

Answer 6

$("input[type=checkbox]").click(function () {
        $(this).siblings().prop("checked", false);
 })

如何在Jquery中设置两个互斥的复选框？

6 个答案: