Отменить выбор радиостанции

Question

Я использую bootstrap radio buttons и хотел бы разрешить отмену радиогруппы. Это можно сделать, используя дополнительную кнопку (Fiddle). Однако вместо дополнительной кнопки я хотел бы отключить выбранный параметр радио, если эта опция нажата, когда она активна.

Я попытался это

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this); 

     if ($(clickedLabel).hasClass("active")) 
     { 
      // an active option was clicked => deselect it 
      $(clickedLabel).children("input:radio").prop("checked", false) 
      $(clickedLabel).removeClass("active"); 
     } 
    } 
) 

, но там, кажется, состояние гонки: событие, нажав на ярлык, который я использую, кажется, используется bootstrap.js установить щелкнул вариант этикетки для «активного ». Если я ввести тайм-аут, класс «активный» удаляется успешно:

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this); 

     if ($(clickedLabel).hasClass("active")) 
     { 
      setTimeout(function() { 
       // an active option was clicked => deselect it 
       $(clickedLabel).children("input:radio").prop("checked", false) 
       $(clickedLabel).removeClass("active"); 
      }, 500) 
     } 
    } 
) 

Как переключить выбранный вариант успешно без использования тайм-аута ?? Спасибо за помощь.

Answer 1

Вместо использования метода двух в preventDefault & stopPropagation, использовать возвращают ложь, будет работать так же.

Разница заключается в том, что return false; немного уступает в тем, что он также предотвращает распространение этого события (или «пузырение вверх») DOM. Вы не можете знать этот бит, когда событие происходит на элементе, это событие запускается на каждом отдельном родительском элементе .

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this); 



      if ($(clickedLabel).hasClass("active")) 
      { 
       // an active option was clicked => deselect it 
       $(clickedLabel).children("input:radio").prop("checked", false) 
       $(clickedLabel).removeClass("active"); 
       return false; 
      } 
     }); 

Answer 2

После беспорядка с кодом в jsfiddle какое-то время я понял, что комбинация preventDefault() и stopPropagation() делает трюк.

Вот fiddle

и код:

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this); 

     if ($(clickedLabel).hasClass("active")) 
     { 
      // an active option was clicked => deselect it 
      $(clickedLabel).children("input:radio").prop("checked", false) 
      $(clickedLabel).removeClass("active"); 
      e.preventDefault(); 
      e.stopPropagation(); 
     } 
    } 
);