Javascript / JQuery Отмена выбора переключателей

Question

У меня есть следующий javascript, который я хочу использовать, чтобы позволить пользователю отменить выбор выбранной радиокнопки, щелкнув ее. (Я знаю, что это не стандарт, но это требуется системой:)

DeselectRadioButton = {
    setup: function () {
        $(".deselectRadioButton").click(function () {
            if ($(this).is(':checked')) {
                alert("I am checked!");
                ($(this).removeAttr('checked'));
            }
        });
    }
};

Моя проблема в том, что когда я выбираю невыбранную радиокнопку, она сразу же отменяет ее выбор после показа предупреждения.

Мне кажется, я получаю событие после того, как элемент был изменен - ​​как я могу исправить этот код, чтобы отключить возможность выбора радиокнопки?

Спасибо!

Answer 1

Однако главная проблема в том, что когда я выберите невыбранный переключатель, это немедленно отменяет выбор после предупреждение показывает.

Кажется, вы не можете предотвратить стандартное поведение переключателя с помощью return false или e.preventDefault(), поскольку переключатель всегда проверяется при срабатывании обработчика щелчка. Одним из способов было добавить отдельный класс к переключателю и использовать его в качестве индикатора.

$(".deselectRadioButton").click( function(e){
    if($(this).hasClass("on")){
       $(this).removeAttr('checked');
    }
    $(this).toggleClass("on");
}).filter(":checked").addClass("on");

Пример кода на jsfiddle .

Answer 2

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

Я только что натолкнулся на решение здесь это прекрасно работает:

var allRadios = $('input[type=radio]')
var radioChecked;

var setCurrent = function(e) {
  var obj = e.target;
  radioChecked = $(obj).attr('checked');
}

var setCheck = function(e) {
  if (e.type == 'keypress' && e.charCode != 32) {
    return false;
  }
  var obj = e.target;
  if (radioChecked) {
    $(obj).attr('checked', false);
  } else {
    $(obj).attr('checked', true);
  }
}    

$.each(allRadios, function(i, val){        
  var label = $('label[for=' + $(this).attr("id") + ']');

  $(this).bind('mousedown keydown', function(e){
    setCurrent(e);
  });

  label.bind('mousedown keydown', function(e){
    e.target = $('#' + $(this).attr("for"));
    setCurrent(e);
  });

  $(this).bind('click', function(e){
    setCheck(e);    
  });
});

Answer 3

попробуй:

$(this).removeAttr('checked');

Answer 4

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

$(":radio").click( function(e){
    var itsOn = $(this).hasClass("on");
    $(":radio[name="+ this.name + "]").removeClass("on");
    if(itsOn){
      $(this).removeAttr('checked');
      $(this).siblings().filter("[value='']").attr('checked', true);
    } else {
      $(this).addClass("on");
    }
  }).filter(":checked").addClass("on");

Answer 5

Вы уверены, что с этим больше ничего не будет?

Я попробовал этот код, и он работает:

HTML

<ul>
    <li>
        <input id="one" name="value" type="radio">
        <label for="one">One</label>
    </li>
    <li>
        <input id="two" name="value" type="radio">
        <label for="two">Two</label>
    </li>
    <li>
        <input id="three" name="value" type="radio">
        <label for="three">Three</label>
    </li>
</ul>

JavaScript

$("input[type='radio']").click(function(event) {
    // If the button is selected.
    if ($(this).hasClass("checked")) {
        // Remove the placeholder.
        $(this).removeClass("checked");
        // And remove the selection.
        $(this).removeAttr("checked");
    // If the button is not selected.
    } else {
        // Remove the placeholder from the other buttons.
        $("input[type='radio']").each(function () {
            $(this).removeClass("checked");
        });
        // And add the placeholder to the button.
        $(this).addClass("checked");
    }
});

Вы можете проверить это здесь .