jQuery jQuery检测点击禁用提交按钮

jQuery detect click on disabled submit button

提问by totallyNotLizards

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

小提琴：http: //jsfiddle.net/ugzux/

As you can see, I have a form with a disabled (via javascript) submit button.

如您所见，我有一个禁用（通过 javascript）提交按钮的表单。

I want to be able to bind a click event to it anyway, so I can do some jazzy indication of what needs to be fixed on the input before I'll allow the form to be submitted (i.e enable the button again).

无论如何，我希望能够将单击事件绑定到它，因此我可以在允许提交表单之前对需要在输入上修复的内容进行一些爵士指示（即再次启用按钮）。

However, disabling the submit button also apparently disables any click events bound to the button, even if they are bound after the disable - any idea how to get around this?

但是，禁用提交按钮显然也会禁用绑定到该按钮的任何点击事件，即使它们在禁用后绑定 - 知道如何解决这个问题吗？

Practically, one solution is to stop disabling the button and instead have an event that does

实际上，一种解决方案是停止禁用按钮，而是有一个事件

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

However I want to know the ins and outs of disabled inputs and javascript events, and if there are workarounds as I've never encountered this behaviour before.

但是，我想知道禁用输入和 javascript 事件的来龙去脉，以及是否有解决方法，因为我以前从未遇到过这种行为。

回答by ipr101

Found this in this question-

在这个问题中找到了这个-

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

Firefox，或许还有其他浏览器，会在已禁用的表单字段上禁用 DOM 事件。在禁用的表单字段开始的任何事件都被完全取消并且不会向上传播 DOM 树。如果我错了，请纠正我，但是如果您单击禁用按钮，则事件源是禁用按钮，并且单击事件将完全消失。浏览器实际上并不知道按钮被点击了，也不会传递点击事件。就好像你在点击网页上的一个黑洞。

I'd thought you might be able to 'fake' a click by wrapping the button in a div and firing the logic on the div's click event. But, as indicated above, the events on disabled elements do not seem to be bubbled up the DOM tree.

我认为您可以通过将按钮包装在 div 中并在 div 的点击事件上触发逻辑来“伪造”点击。但是，如上所述，禁用元素上的事件似乎没有在 DOM 树中冒泡。

回答by iPadDeveloper2011

The best way I've found to do this is to use a "disabled" class to disable the button. You can then catch click events normally in jquery. If $(this).hasClass('disabled'), you do your 'jazzy indication' stuff, along with event.preventDefault();Once the user has done their thing, you can removeClass('disabled')from the input[type="submit"]'button'. Easy!

我发现这样做的最好方法是使用“禁用”类来禁用按钮。然后您可以在 jquery 中正常捕获点击事件。如果$(this).hasClass('disabled')，你做你的“爵士指示”的东西，以及event.preventDefault();一旦用户完成了他们的事情，你可以removeClass('disabled')从input[type="submit"]“按钮”。简单！

回答by RonnyKnoxville

You could put a div around the submit button and attach a click function to that for when the submit button is disabled:

您可以在提交按钮周围放置一个 div，并在禁用提交按钮时为其附加一个单击功能：

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

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

This is just code from the top of my head, so it might not be exactly right. But you get the point.

这只是我头脑中的代码，所以它可能不完全正确。但你明白了。

回答by Dobromir Penchev

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

Here you go ;)

干得好 ;）

回答by Ng Sek Long

I have a slight more complicate but similar use case to you:

我有一个稍微复杂但与您类似的用例：

1. There are manysubmit buttonon the screen, but by default they are disabled
2. User need to click on the consent checkboxfor button to be enabled
3. The consent checkbox can be toggled on / off
4. After click on the checkbox, they can click on all of the submit button

1. 屏幕上有很多提交按钮，但默认情况下它们是禁用的
2. 用户需要单击同意复选框才能启用按钮
3. 同意复选框可以打开/关闭
4. 单击复选框后，他们可以单击所有提交按钮

Using jQuery, I have done it with Overlapping the button with a div, and wrapping the div instead another div

使用 jQuery，我已经完成了用div 重叠按钮，并将 div 包裹在另一个 div 中

See the below demo

看下面的演示

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>

Good things about this approach:

这种方法的优点：

• Only need to add a class for the button to be disabled, the other HTML remain the same
• Can consent multiple button at once
• The button is actually disabled instead of using fancy customized method, that make external library understand and make CSS accordingly

• 只需要为要禁用的按钮添加一个类，其他HTML保持不变
• 可以一次同意多个按钮
• 该按钮实际上是禁用的，而不是使用花哨的自定义方法，使外部库理解并相应地制作 CSS

回答by Milena Beerg

You should use .disabled class to style element to look disabled and then handle it as you wish using .hasClass('.disabled') in your JS code. It sould work as long as you didn't put "pointer-events: none;" declaration in your css code for .disabled class

您应该使用 .disabled 类来设置元素的样式以使其看起来被禁用，然后在您的 JS 代码中使用 .hasClass('.disabled') 来处理它。只要您没有放置“指针事件：无”，它就可以工作。在 .disabled 类的 css 代码中声明

回答by Dennis Golomazov

Making the button readonlycan help, because the click event will be fired. Though be aware of the differences in behaviour.

制作按钮readonly会有所帮助，因为点击事件将被触发。虽然要注意行为上的差异。

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

回答by Marten Brosch

An other workaround with combination of a required checkbox could be:

结合必需复选框的其他解决方法可能是：

<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

CSS-魔术

#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

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');
      }
  });

});

Maybe not state of the art, but it works pretty well!

也许不是最先进的，但它工作得很好！

• the checkbox needs to be checked for giving the submit button a higher z-index
• if not, there is the button_overlay above, with a click event on it, for highlighting the message

• 需要选中复选框才能为提交按钮提供更高的 z-index
• 如果没有，上面有button_overlay，上面有一个点击事件，用于突出显示消息

回答by Dennis Hunink

Just don't disable the button, but prevent submit of the form. Looks like you're trying to validate the form; when you let JS take over the submit action, and return false, the form won't be submit

只是不要禁用按钮，而是防止提交表单。看起来您正在尝试验证表单；当你让 JS 接管提交动作，并返回 false 时，表单将不会被提交

回答by Rajilesh Panoli

css

css

[disabled]{
pointer-events:none;
}

html

html

<span class="button"><input type="submit" disabled /></span>

You can try this for button click

你可以试试这个按钮点击

$('.button').click(function(){
// do your code here.
});