JQuery detect click on disabled submit button

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

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

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

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

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

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

Ответ 1

Нашел это в этом question -

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

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

Здесь вы идете;)

Ответ 5

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

<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-вещество

(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 выше, с событием клика на нем, для выделения сообщения

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Используя 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>

Ответ 9

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