Как мне установить два взаимоисключающих флажка в Jquery?

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> 

Я пытаюсь установить либо один флажок, либо другой. Таким образом, если один флажок НЕ отмечен, он должен быть либо запрещен, либо принудительно другой флажок должен быть отмечен ... другими словами, применять одно или другое, но никогда не разрешать «неопределенное» условие

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

Я бы использовал эту функцию. Позволяет взаимное исключение и снимает флажок:

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

Answer 4

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

Answer 5

Я также хотел отметить отличную ссылку http://rndnext.blogspot.com/2009/08/mutually-exclusive-html-select-elements.html здесь.

Одно предостережение, я использовал его для мьютекса двух динамически генерируемых списков выбора внутри div.,Поскольку содержимое, которое нужно манипулировать, недоступно при загрузке страницы, оно не работает должным образом.Следующие решения на jQuery - выбор динамически созданных div помог решить проблему.

Answer 6

Я столкнулся с этой проблемой недавно, за исключением того, что мне требовались флажки вместо переключателей, так как было необходимо отключить обе опции.Я решил это следующим образом (адаптировано к коду ОП):

<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);
        }
    });
)};

Может быть, это не так красиво, но это работает.