jQueryのチェック/ディスエーブルの変更を聞く

HTMLページにオブジェクト(div、input/checkbox)があります。 "checked"属性と "disabled"属性の値は、いくつかのJS関数を介して設定されます。私はこれらの属性の変更を聞きたいが、それを実行するための関数やリスナーを見つけることができなかった。

属性のステータスに応じて、「checked」または「disabled」の変更をリッスンし、いくつかのコード(checkbox/divのスタイルを変更するなど)を実行するイベントリスナーを追加するにはどうすればよいですか?

ありがとう

3
スタイルを変更するには、CSSの:checked 疑似クラスを使用するだけです。 jsfiddle.net/ceEnA
追加された 著者 pimvdb,
あなたの後ろのことはわかりませんが、属性のステータスに応じて(たとえばチェックボックス/ divのスタイルを変更する) "はCSSで最も簡単に実装できます。
追加された 著者 pimvdb,
@pimvdbが言ったものを拡張するために、あなたは:disabled 疑似クラスを使うこともできます - 私はpimvdbのフィドルへの更新を行っています: jsfiddle.net/ceEnA/2
追加された 著者 nnnnnn,
私はCCSスタイルを変更しませんが、divに "disabled"のような属性を追加します
追加された 著者 Konrad,

6 答え

Regarding the "disabled" change, you may be able to listen to DOMAttrModified events. See this test case for details: http://jsfiddle.net/4kWbp/1/

すべてのUAがDOMAttrModifiedのようなDOM突然変異イベントをサポートするわけではなく、それをサポートしているUAがそれを聞くと、パフォーマンスが低下する可能性があることに注意してください。

.checkedを直接設定しても "変更"イベントは発生せず、DOMAttrModifiedも起動されていないようです(Operaでもテストされていますが、これは間違いのようなものですおそらくそれはOperaのバグです。)

最後の手段は、おそらくそれらのプロパティのgetter/setterを定義することです。それはかなり醜いハックだけど..

3
追加された
Heh、このテストでChromeがDOMAttrModifiedを起動しないことがわかりました。 FirefoxはOperaよりも少ないイベントしか発生させないため、一貫性が低くなります。しかたがない。だから、これを行う最善の方法は、.checkedと.disabledを設定して、あなたが聞くことができるイベントを送るか、JSに直接呼び出すようにするスクリプトにフックするか、変更することです。それはあなたのプロジェクトにとってはまったく選択肢ではありませんか?
追加された 著者 hallvors,

擬似セレクタを:checked :disabled に使用して、 animationstart イベントを引き起こす空のアニメーションをトリガすることができます。例えば:

select > option:checked {
    animation: checked 1ms;
}
select > option:not(:checked) {
    animation: unchecked 1ms;
}
@keyframes checked { from {}; to {}; }
@keyframes unchecked { from {}; to {}; }

あなたはjavascriptで次のものを使うことができます:

document.body.querySelector('select').addEventListener('animationstart',
    function (ev) {
        console.dir(ev);
    });

このイベントには、十分に機能する animationName および target プロパティがあります。

1
追加された

私はあなたの質問に答えていないが、私はイベントバス(GWTのイベントハンドラ)のようなものを試してみることをお勧めすることができます。

JQueryでは、イベントを使用できます。

1
追加された

チェックボックスがトグルされたときを「聴く」にはchange()を使います:

$('.target').change(function() {
    console.log(this.checked ? 'Checked' : 'Not Checked');
});
0
追加された
チェックボックスの選択が直接のクリックによって変更され、スクリプトを介さずに変更された場合(例えば、$(checkboxID).attr( 'checked'、 'checked');
追加された 著者 Konrad,

$( '#Checkboxid:checked')チェックボックスの値がオンの場合はtrueを返し、チェックボックスの値がオフの場合はfalseを返します。 これはjqueryセレクタ関数です:checkedはラジオとチェックボックスの値をチェックするのに使うことができます。

構文は次のとおりです。

$('#checkboxid:checked')
0
追加された
しかし、私はすべてのチェックされたチェックボックスを選択したくないですが、私はこのステータスの変化に反応したいです... "チェックされた"ステータスにリスナーを追加するにはどうすればいいですか?
追加された 著者 Konrad,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript