Все флажки установлены, но я хочу, чтобы ОДИН флажок был активирован - PullRequest
Новая
       32

Все флажки установлены, но я хочу, чтобы ОДИН флажок был активирован

0 голосов
/ 24 мая 2019

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

Поток предположим так:

  1. Когда флажок снят, и пользователь щелкнет по нему, он будет проверен

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

Ниже приведен элемент html 

    <div class="star_wrap">
      <input type="checkbox" /><label onclick="confirmLabelRemove(this)"><label>
    </div>
    i put the click event in label to trigger the input before it to be checked or unchecked

Ниже приведен код для генерации уникального идентификатора для каждого флажка 

    var listItems = $(".star_wrap"); // the container of each checkbox
    listItems.each(function (idx) {
    $(this).find('input').attr('id', 'chkbox' + idx);
    //$(this).find('label').attr('for', 'chkbox' + idx); I don't want this 
    feature because If I click on the label it will prop check the 
    checkbox before the pop up modal show up.
});

Ниже приведен код для запуска события проверки проп. 

    function confirmLabelRemove(obj) {
    var thisLabelInput = $(obj).prev(); // find the input before the label

    if ($(thisLabelInput).is(':checked')) {
    overlayConfirmShow(); // transparent layer to prevent back content clickable
    $('.confirmation_box').addClass('show'); // show the pop up modal

    $('#confirmBoxConfirm').on('click', function () {
        $(obj).prev().prop('checked', false);
        $(obj).closest('.grid-item').addClass('unfav');
        overlayConfirmHide();
        $('.confirmation_box').removeClass('show');
     });
    } else {
      $(obj).closest('.grid-item').removeClass('unfav');
      $(obj).prev().prop('checked', true);
     }
    }

Если есть только1 флажок, отлично работает.Но когда они представляют собой список флажков, снятие отметки и отметка 1 флажка вызовет ранее отмеченные или снятые флажки.Пожалуйста, совет, спасибо.

1 Ответ

1 голос
/ 24 мая 2019

Вы фактически присоединяете более одного обработчика к событию click, когда эта строка запускается более одного раза ($('#confirmBoxConfirm').on('click', function () {), и они не удаляются.Это означает, что при нажатии запускается каждый ранее установленный обработчик.

Вы можете сначала удалить его: 

$('#confirmBoxConfirm').off('click').on('click', function () {

или если у вас уже есть другие обработчики щелчков, и вы хотите удалить только этотодин, это должна быть именованная функция: 

function theClick() {
    $(obj).prev().prop('checked', false);
    $(obj).closest('.grid-item').addClass('unfav');
    overlayConfirmHide();
    $('.confirmation_box').removeClass('show');
};

$('#confirmBoxConfirm').off('click', theClick).on('click', theClick);
...