無効な入力のイベント

どうやら障害者<input>はどのイベントでも処理されません

この問題を回避する方法はありますか？

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

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

ここで、入力をクリックして有効にする必要があります。しかし、私がそれをアクティブにしない場合、入力は投稿されるべきではありません。

無効化された要素はマウスイベントを発生させません。ほとんどのブラウザーは、無効化された要素から発生したイベントを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/（のprop代わりに jQuery 1.7を使用するように更新attr）

フィールドを読み取り専用にして、送信時にすべての読み取り専用フィールドを無効にすることができます

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

入力（+スクリプト）は

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

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

無効化された要素は、一部のブラウザーでクリックを「食べる」-それらに応答せず、要素またはそのコンテナーのいずれかでイベントハンドラーによってキャプチャーされることを許可しません。

これを "修正"する最も簡単でクリーンな方法（実際には、OPのように無効な要素のクリックをキャプチャする必要がある場合）は、次のCSSをページに追加するだけです。

input[disabled] {pointer-events:none}

これにより、無効化された入力のクリックが親要素に渡され、通常どおりにキャプチャできます。（無効になっている入力が複数ある場合、それらがまだそのようにレイアウトされていない場合は、それぞれを独自のコンテナーに追加することをお勧めします-追加<span>または<div>、たとえば-無効になっている入力を簡単に区別できるようにするためクリックされました）。

欠点は、pointer-eventsCSSプロパティをサポートしていない古いブラウザでは残念ながらこのトリックが機能しないことです。（IE 11、FF v3.6、Chrome v4で動作するはずです）：caniuse.com/#search=pointer-events

古いブラウザをサポートする必要がある場合は、他の回答のいずれかを使用する必要があります！

私は代替案を提案します-CSSを使用してください：

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

disabled属性の代わりに。次に、無効な入力をシミュレートする独自のCSS属性を追加できますが、より詳細に制御できます。

の代わりにdisabled、の使用を検討できますreadonly。いくつかの追加のCSSを使用すると、入力のスタイルを設定して、disabledフィールドのます。

実際には別の問題があります。イベントchangeは、要素がフォーカスを失ったときにのみトリガーされdisabledます。これはフィールドを考慮したロジックではありません。おそらく、別の呼び出しからこのフィールドにデータをプッシュしています。これを機能させるには、イベント 'bind'を使用できます。

$('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"は、不透明度によって無効化された要素を模倣します。

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

そして、要素が無効になっている場合はイベントをキャンセルし、クラスを削除します。

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

ここでの提案もこの質問の良い候補のようです

無効な要素でクリックイベントを実行しますか？JavaScript jQuery

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