[解決済み] jQuery $("#radioButton").change(...) が選択解除の際に発火しない
2022-04-22 13:58:38
質問
1ヶ月ほど前、ミットさんの質問には答えられませんでした。悲しいかな、私も今同じ状況に陥っています。
http://api.jquery.com/change/#comment-133939395
こんな状況です。ラジオボタンの変更を取り込むためにjQueryを使用しています。ラジオボタンが選択されると、エディットボックスが有効になります。ラジオボタンが選択されていないとき、エディットボックスを無効にしたい。
有効化はうまくいきます。グループ内の別のラジオボタンを選択すると
change
イベントは
ではない
が発射されました。誰かこれを修正する方法を知っていますか?
<input type="radio" id="r1" name="someRadioGroup"/>
<script type="text/javascript">
$("#r1").change(function () {
if ($("#r1").attr("checked")) {
$('#r1edit:input').removeAttr('disabled');
}
else {
$('#r1edit:input').attr('disabled', true);
}
});
</script>
解決方法は?
のように見えます。
change()
関数は、ラジオボタンをチェックしたときのみ呼び出され、チェックを外したときには呼び出されません。 私が使った解決策は、すべてのラジオボタンにchangeイベントをバインドすることです。
$("#r1, #r2, #r3").change(function () {
あるいは、すべてのラジオボタンに同じ名前を付けることもできます。
$("input[name=someRadioGroup]:radio").change(function () {
以下は、動作中の jsfiddleの例 (クリス・ポーター氏のコメントから更新しました。)
Ray さんのコメントで、名前に
.
があります。これらの名前は、jQuery 1.7.2 では動作しますが、他のバージョンでは動作しません (
jsfiddleの例です。
).
関連
-
JavaScriptの配列共通メソッド解説
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み] jQuery の jquery-1.10.2.min.map が 404 (Not Found) を誘発する。
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
-
[解決済み] JQuery - $が定義されていない
-
[解決済み] jQueryで入力変化を検出する?
-
[解決済み】ラジオボタン(INPUT type="radio")のOnChangeイベントハンドラが1つの値として動作しない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
JavaScriptの関数この指摘の問題を説明
-
jsを使った簡単な照明スイッチのコード
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
Vueのクラススタイルの使い方の詳細
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] jQueryの送信ボタンの無効化・有効化