jQuery обнаруживает нажатие на отключенную кнопку отправки

Question

Fiddle: http://jsfiddle.net/ugzux/

Как видите, у меня есть форма с отключенной (через javascript) кнопкой отправки.

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

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

Практически, одно решение состоит в том, чтобы прекратить отключение кнопки и вместо этого иметь событие, которое выполняет

$('form').submit(function(event){
    event.preventDefault(); 
});

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

Answer 1

Нашел это в этом вопросе -

Firefox и, возможно, другие браузеры, отключают события DOM в полях формы, которые отключены.Любое событие, которое начинается с отключенного поля формы, полностью отменяется и не распространяется вверх по дереву DOM.Поправьте меня, если я ошибаюсь, но если вы нажмете кнопку «Отключено», источником события будет кнопка «Отключено», и событие нажатия будет полностью уничтожено.Браузер буквально не знает, что кнопка была нажата, и не передает событие click.Это как если бы вы нажимали на черную дыру на веб-странице.

Я думал, что вы могли бы «подделать» клик, поместив кнопку в элемент div и запустив логику насобытие щелчка div.Но, как указано выше, события на отключенных элементах, похоже, не всплывают в DOM-дереве.

Answer 2

Лучший способ сделать это - использовать отключенный класс для отключения кнопки.Затем вы можете отлавливать события нажатия в jquery.Если $(this).hasClass('disabled'), вы делаете свое «джазовое указание» вместе с event.preventDefault(); Как только пользователь сделал свое дело, вы можете removeClass('disabled') с кнопки input[type="submit"].Легко!

Answer 3

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

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
    if (attr('submit-button', 'disabled') == 'true')
    {
        alert('Button Disabled')
    }
});

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

Answer 4

$(document).on('click', '.wrapper-of-disabled-button', function(){
  if ($(this).find('button.disabled').length > 0) {
    // Do your magic on the parent -> $(this)
  }
});

Вот, пожалуйста;)

Answer 5

У меня есть несколько более сложный, но похожий вариант использования:

1. На экране много кнопок , но по умолчанию они отключены
2. Пользователь должен установить флажок согласия , чтобы кнопка была включена
3. Флажок согласия может быть включен / выключен
4. После нажатия на флажок, они могут нажать на все кнопки отправки

Используя jQuery, я сделал это с помощью Наложение кнопки на div и добавление div вместо другого div

См. Демо ниже

var toggleNeedConsent = function() {
  var isEnableCheckbox = $('#consent-confirm-checkbox').prop('checked');
  $('.needConsentButton').prop('disabled', !isEnableCheckbox);
  if (!isEnableCheckbox) {
    if (!$(".needConsentButtonOutterDiv").length) {
      $('.needConsentButton').wrap("<div class='needConsentButtonOutterDiv' style='display: inline-block; position:relative'></div>");
    }
    $('.needConsentButton').after('<div class="needConsentButtonDiv" style="position:absolute; top:0; left:0; width: 100%; height:100%; ;"></div></div>');

    $('.needConsentButtonDiv').click(function(e) {
      alert('Please accept the consent first');
    })
  } else {
    $(".needConsentButtonDiv").remove();
  }
}

$(function() {
  toggleNeedConsent();
  $('#consent-confirm-checkbox').click(function() {
    toggleNeedConsent();
  });

  $("#approveButton").click(function() {
    alert('You are a wizard, Harry!');
  })

  $("#approve2Button").click(function() {
    alert('Harry, you are a wizard!');
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click consent checkbox before approve! <input type="checkbox" id="consent-confirm-checkbox">
<br/>
<br/>

<button class="needConsentButton" id="approveButton">Approve Form1!</button>

<br/>
<br/>
<button class="needConsentButton" id="approve2Button">Approve Form2!</button>

Что хорошего в этом подходе:

• Нужно только добавить класс для кнопки, которую нужно отключить, остальные HTML остаются прежними
• Может согласиться несколько кнопок одновременно
• Кнопка фактически отключена вместо использования необычного настраиваемого метода, который позволяет внешней библиотеке понимать и, соответственно, делает CSS

Answer 6

Вы должны использовать класс .disabled для стилизации элемента, чтобы он выглядел отключенным, а затем обрабатывать его, как хотите, используя .hasClass ('. Disabled') в своем коде JS. Это может работать до тех пор, пока вы не добавите "pointer-events: none;" объявление в вашем CSS-коде для класса .disabled

Answer 7

Создание кнопки readonly может помочь, потому что событие щелчка будет запущено. Хотя следует помнить о различиях в поведении .

<input type="submit" value="Submit" readonly="readonly" />

Answer 8

Другой обходной путь с комбинацией обязательного флажка может быть:

<input type="checkbox" class="einwilligung" name="einwilligung" value="ja"/>
<div class="einwilligung_hinweis">U need to check this box</div>
<div class="button_outer">
        <input type="submit" name="submit" value="Senden" id="submitButton" disabled="disabled" class="nope btn" />
        <span class="button_overlay"></span>
 </div>

CSS-Magic

#submitButton{
display:inline-block;
color:#D00019;
width:160px;
z-index:30;
position:absolute;
display:block;
top:0;
left:0;
height:30px;
outline:none;
}

#submitButton.nope{
z-index:10;
color:#333;
}

.button_outer {
width:162px;
height:32px;
z-index:50;
position:relative;
}

span.button_overlay{
display:block;
height:30px;
width:162px;
position:absolute;
top:0;
left:0;
background:#fff;
opacity:0.3;
filter: alpha(opacity=30);
z-index:20;
}

.einweilligung_hinweis_error{
color:red;
}

JQuery-Stuff

(document).ready(function() {

  $('.einwilligung').click(function() {
    var buttonsChecked = $('.einwilligung:checked');
    if (buttonsChecked.length) {
      $('#submitButton').removeAttr('disabled');
      $('#submitButton').removeClass('nope');
      $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
    }
    else {
      $('#submitButton').attr('disabled', 'disabled');
      $('#submitButton').addClass('nope');
    }
  });

  $('.button_outer').click(function(){
     if($('#submitButton').hasClass('nope')){
          $('.einwilligung_hinweis').addClass('einweilligung_hinweis_error');
      }else{
          $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
      }
  });

});

Возможно, это не современный уровень, но он работает очень хорошо!

• необходимо установить флажок, чтобы дать кнопке отправки более высокий z-индекс
• если нет, то есть кнопка button_overlay, с событием click для подсветки сообщения

Answer 9

Только не отключайте кнопку, а предотвращайте отправку формы. Похоже, вы пытаетесь проверить форму; если вы позволите JS принять действие отправки и вернуть false, форма не будет отправлена ​​