Question

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

代码示例：

<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上的点击，则它可以正常工作，但您需要在按钮外单击。

我该如何解决这个问题？

由于

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

<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>

现在它按预期工作

Answer 1

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

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

<强> HTML

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

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

Answer 2

禁用的元素根本不会触发任何鼠标事件，因此这可能是一个失败的原因。

但是，单击父元素时，似乎正确给出了event.target，这意味着这应该有效：

$(document).on('click', function (e) {   
    if (e.target.id == 'subm_tc') {
        if($("#modlgn-tc").is(':checked')){
             alert('checked');
        } else {
             alert('unchecked');
        }
    }
});

FIDDLE

Answer 3

您可以编写一个函数，将侦听器添加到 mousedown 和 mouseup 事件中，如果目标与 Node 匹配（即< em> mousedown 并且 mouseup 在你的元素上），然后它调用另一个函数

function listenFullClick(elm, fn) {
    var last;
    document.addEventListener('mousedown', function (e) {
        last = e.target === elm;
    });
    document.addEventListener('mouseup', function (e) {
        if (e.target === elm && last) fn();
    });
};

listenFullClick(
    document.getElementById('foo'), // node to look for
    function () {alert('bar');}     // function to invoke
);

DEMO

Answer 4

如果您使用Twitter Bootstrap，它们会为您提供类disabled，该类提供样式但不删除click事件。鉴于此，我所做的就是这个（还请记住，我想确保当按钮不再被禁用时，原始点击事件确实触发了，并且我不想处理解除绑定，重新绑定的情况）。

function disableButton(btn, message) {
  btn.addClass("disabled")
  if (!(message == null || message == "")) {
    btn.data("message", message)
  }
}

function enableButton(btn) {
  btn.removeClass("disabled")
}

$("#btn").click(function() {
  if (!($(this).hasClass("disabled"))) {
    // original, desired action
  } else {
    message = $(this).data("message")
    if (!(message == null || message == "")) {
      alert(message)
    }
  }

}）

Answer 5

旧话题，但这是我的两分钱，因为我最近面临同样的挑战：

请勿尝试将可点击元素放置在其上方，而应将其包裹起来，这样您将无法直接单击它。假设设置了display: inline-block的按钮：

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

为禁用按钮的情况定义单击事件：

$('.on-disabled').click(function (ev) {
  // Don’t react to click events bubbling up
  if (ev.target !== ev.currentTarget) return;
  // Do your thing
  alert('Sorry, this button is disabled');
});

只需将按钮样式设置为：

#subm_tc {
  display: inline-block;
}

#subm_tc[disabled] {
  position: relative;
  z-index: -1;
}

这使您即使在禁用按钮的情况下也可以轻松地对单击做出反应。参见FIDDLE。

如何在禁用的元素上触发单击事件

5 个答案: