单击禁用的输入按钮时显示模式弹出窗口？答案

【问题标题】：Display a modal popup when clicking a disabled input button?单击禁用的输入按钮时显示模式弹出窗口？
【发布时间】：2014-03-31 22:57:29
【问题描述】：

我有一个禁用的输入提交按钮。如果有人点击它，我想显示一个弹出模式，基本上解释了为什么该按钮被禁用。

该按钮被禁用，例如，此特定产品缺货。模态将解释这一点。

我的输入按钮如下所示：

<input type="submit" id="StandardProductAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled"/>

【问题讨论】：

Event on a disabled input 的可能重复项

标签： javascript jquery html twitter-bootstrap modal-dialog

【解决方案1】：

之前由 Andy-e 回答并在此处找到：Event on a disabled input

禁用的元素不会触发鼠标事件。大多数浏览器都会将源自禁用元素的事件向上传播到 DOM 树，因此事件处理程序可以放置在容器元素上。但是，Firefox 没有表现出这种行为，它什么也不做当你点击一个被禁用的元素时。

我想不出更好的解决方案，但是，对于完整的跨浏览器兼容性，您可以在禁用前放置一个元素输入并点击该元素。这是我的一个例子意思是：

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

jquery:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

示例：http://jsfiddle.net/RXqAm/170/（更新为使用 jQuery 1.7 和 prop 而不是 attr）。

【讨论】：

非常感谢。这有效，而其他解决方案失败了。 :)

【解决方案2】：

浏览器在被禁用的表单元素上禁用 DOM 事件（如点击）。您可以在提交按钮周围放置一个 div，并在提交按钮被禁用时附加一个点击功能：

<div id="submit-div">
    <input type="submit" id="StandardProductAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled"/>
<div>

$('#submit-div').click(function(event){
    if ($('#StandardProductAddToCart').attr('disabled') == 'disabled')
    {
        /* Do your modal popup */
    }
});

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

【讨论】：