Нажатие на ярлык не проверяет соответствующий флажок

Question

Я боролся с ошибкой, влияющей на jQtransform:

Когда вы нажимаете на ярлык, связанный с флажком, он «визуально» ставит флажок, но при отправке формы, это не такотправлен . (поэтому он проверяет только слой jqTransform, а не реальный флажок)

• При том же сценарии с радио -> он работает

• Нажатие direclty на флажок -> работает

  $.fn.jqTransCheckBox = function(){
  return this.each(function(){
      if($(this).hasClass('jqTransformHidden')) {return;}
  
      var $input = $(this);
      var inputSelf = this;
  
      //set the click on the label
      oLabel = jqTransformGetLabel($input);
      oLabel && oLabel.click(function(){aLink.trigger('click');}); // -> Bug here ?
  
      var aLink = $('<a href="#" class="jqTransformCheckbox"></a>');
      //wrap and add the link
      $input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink);
      //on change, change the class of the link
                  $input.change(function(){
                    inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
                    return true;
                  });
      // Click Handler, trigger the click and change event on the input
      aLink.click(function(){
          //do nothing if the original input is disabled
          if($input.attr('disabled')){return false;}
          //trigger the envents on the input object
                          $(this).toggleClass('jqTransformChecked');
          $input.trigger('click').trigger("change");
          return false;
      });
  
      // set the default state
      this.checked && aLink.addClass('jqTransformChecked');
  });
  

  };

Спасибо

Answer 1

Кажется, aLink.trigger('click') звонок по какой-то причине не работает.Я исправил это, заменив эту строку:

oLabel && oLabel.click(function(){aLink.trigger('click');});

следующим:

oLabel && oLabel.click(function(){
    var forAttr = null;
    if(forAttr = $(this).attr('for')) {
        var element = $(this).siblings('#' + forAttr);
        if(element.length) {
            element.trigger('click');
        }
    }
    else {
        aLink.trigger('click');
    }
});

Что это делает, проверяет родные элементы метки для элемента в его атрибуте for и еслиэлемент существует, он использует его вместо aLink.Я использую братьев и сестер, потому что это быстрее, чем поиск по всему документу.Не стесняйтесь изменить это при необходимости.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: Хорошо, возможно, я бросился в это с этим ответом.Мое решение неверно на многих уровнях.

Я считаю, что на самом деле происходит то, что нажатие на ярлык вызывает двойной щелчок.Таким образом, при нажатии на метку срабатывает щелчок по умолчанию, который проверяет элемент, и сразу после того, что снимает флажок, запускается еще один щелчок.

Мое предыдущее решение на самом деле ничего не делало, просто предотвращало повторный вызов, поскольку ни одно из условий фактически не выполнялось (элемент '#' + forAttr не является родственным).

Я обнаружил, что просто комментирование строки с ошибкой устраняет эту проблему.

Answer 2

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

Мне кажется, чтопроблема в jqTransformGetLabel.

Он пытается получить метку с помощью next () и, если это не работает, с prev ().Это путешествует только один уровень в DOM.Изменение

var oLabel = objfield.next();

на

var oLabel = $(objfield.find('label').get(0));

и

oLabel = objfield.prev();

на

oLabel = $(objfield.parents('label').get(0));

внутри jqTransformGetLabel, похоже, решило проблему для меня.

Answer 3

что я обнаружил, это

<input type="checkbox" name="sexi" id="test" />
<label>Female</label>

работает, но это

<input type="checkbox" name="sexi" id="test" />
<label for="test">Female</label>

не

оба работают для радиовхода!

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

Я пытаюсь исправить ошибку в коде, но тот же код используется для радио и флажок ... хм ..

Answer 4

Как отметил Влад Казаку, проблема вызвана двойным щелчком (по умолчанию и вызываемым в функции щелчка).

Чтобы избежать события по умолчанию, мы должны вернуть false:

oLabel && oLabel.click(function () { aLink.trigger('click'); return false; });

по крайней мере у меня это сработало:)