禁用输入上的事件

禁用的元素不会触发鼠标事件。大多数浏览器都会将源自禁用元素的事件传播到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>​

jq公司:

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

http://jsfiddle.net/RXqAm/170/ (更新为使用jquery1.7和 prop 而不是 attr ).

在某些浏览器中,禁用的元素“吃”点击——它们既不响应它们,也不允许事件处理程序在元素或其任何容器的任何位置捕获它们。

我认为,最简单、最干净的“修复”方法(如果您确实需要像OP一样捕获禁用元素上的点击)就是在页面中添加以下CSS:

input[disabled] {pointer-events:none}

这将使对禁用的输入的任何单击都进入父元素,在那里您可以正常捕获它们(如果您有几个禁用的输入,您可能希望将每个输入放在一个单独的容器中,如果它们还没有按这种方式排列的话—一个额外的容器 <span> 或者 <div> ,例如-只是为了便于区分单击了哪些禁用的输入)。

不幸的是,这种技巧对于不支持 pointer-events caniuse.com/#search=pointer-events

如果您需要支持较旧的浏览器,则需要使用其他答案之一!

$(".myform").submit(function(e) {
  $("input[readonly]").prop("disabled", true);
});

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
  $(this).removeAttr('readonly');
});

$(".myform").submit(function(e) {
  $("input[readonly]").prop("disabled", true);
  e.preventDefault();
});


$('.reset').click(function () {
  $("input[readonly]").prop("disabled", false);
})

$('input[readonly]').click(function () {
  $(this).removeAttr('readonly');
})

input[readonly] {
  color: gray;
  border-color: currentColor;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myform">
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  <input readonly="readonly" value="test" />
  
  <button>Submit</button>
  <button class="reset" type="button">Reset</button>
</form>

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

而不是禁用属性。然后,您可以添加自己的CSS属性来模拟禁用的输入,但需要更多的控制。

disabled readonly 残疾人

实际上还有一个问题。事件 change 只在元素失去焦点时触发,这不是考虑 残疾人

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

或者用jQuery和CSS来实现这一点!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

这样可以使元素看起来被禁用,并且不会触发任何指针事件,但是它允许传播,如果提交,可以使用“ignore”属性忽略它。

今天我们遇到了这样的问题,但是我们不想改变HTML。所以我们用 mouseenter 为实现这一目标而举办的活动

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

我找到了另一个解决方案:

<input type="text" class="disabled" name="test" value="test" />

类“disabled”按不透明度immitate disabled元素:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

如果元素被禁用,则取消事件并删除类:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

这里的建议看起来也很适合这个问题

Performing click event on a disabled element? Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});