如何在禁用的元素上触发单击事件 [英] How to trigger a click event on disabled elements

问题描述

我有一个禁用按钮，在选中我接受条款和条件复选框后启用。
问题是，如果用户点击已停用的按钮，我想触发提醒。我怎样才能做到这一点？如果一个元素被禁用，它看起来像onclick事件没有被触发。

I have a disabled button, which is enabled after checking "I accept terms and conditions" checkbox. The problem is that I wanted to trigger an alert, if a user clicks the disabled button. How can I do this? If an element is disabled, it looks as "onclick" events are not fired.

代码示例：

<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">

    $("#subm_tc").click(function () {
        if($("#modlgn-tc").is(':checked')){
            alert('checked');
        } else {
            alert('unchecked');
        }
    });

如果我将元素包装在div中并听取对该div的点击，它会起作用，但你需要单击按钮外部。

If I wrap the element in div and listen to clicks on that div, it works, but you need to click outside the button.

如何解决此问题？

谢谢

UPDATE。我设法通过在提交按钮上添加假div并在该div上侦听事件来解决此问题（我也将z-index更改为-200启用按钮本身的点击次数）：

UPDATE. I've managed to resolve this by adding a fake div over the submit button and listening to events on that div (I also change z-index to -200 to enable clicks on the button itself):

<div style="position:relative">
<div id="subm_tc" style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px; z-index: 99999;"></div>
<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">
</div>

现在按预期工作

推荐答案

我的解决方案是将按钮放在一个可点击的div中。当按钮被禁用时，div具有按钮的宽度和高度，因此单击按钮会触发div。当按钮启用时，div缩小到0宽度0高度，因此单击事件将使用按钮而不是div进行注册。此代码包含一些演示代码以及切换按钮，该按钮可切换有问题按钮的启用/禁用状态

My solution was to put the button in a div, which is clickable. when the button is disabled, the div has the width and height of the button, so clicking the button triggers the div. when the button is enabled, the div is shrunk to 0 width 0 height, so the click event registers with the button instead of the div. This code includes some demoing code as well for a toggle button which toggles the enabled/disabled state of the button in question

小提琴： http://jsfiddle.net/6as8b/2/

HTML

单击切换以启用或禁用按钮。单击它，看到一个事件在启用时触发，另一个事件触发已禁用。

Click 'Toggle" to make 'Button' enabled or disabled. click it, and see that that one event fires if it is enabled, and another if disabled.

<input type=button value='toggle' id='toggle'><BR>
<div style='position:relative'>
    <div id='clickable'></div>
    <input id=theButton type=button disabled value='Button'>
        </div>
    <div id=clicks></div>

CSS

#clickable{
position:absolute;
    width:55px;
    height:25px;
}

JS

$(document).ready(function () {
    $('#clickable').on('click',function () {
        if ($('#theButton:disabled').length>0)
        {
        $('#clicks').append('|Disabled Button Clicked|<br>');
        }
        else
        {
            //do nothing and let the button handler do it
            $('#theButton').click();
        }
    });
    $('#theButton').on('click',function() {
        $('#clicks').append('|ENABLED button clicked|<br>');
    });
        $('#toggle').on('click',function() {
       if ($('#theButton:disabled').length>0)
        {
            $('#theButton').removeAttr('disabled');
            $('#clickable').css({'width':'0px','height':'0px'});
        }
            else
            {
                $('#theButton').attr('disabled','disabled');
                $('#clickable').css({'width':'55px','height':'25px'});
            }
    });
});

这篇关于如何在禁用的元素上触发单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！