Question

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

该按钮被禁用，因为此特定产品缺货。模式将解释这一点。

我的输入按钮如下所示：

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

Answer 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）。

Answer 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 */
    }
});

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

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

2 个答案: