ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
2023/10/25
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあった。通常の場合だとdisabled属性指定で対応したいが当該formはASP側で制御されており変更が難しいという状況。幸いなことにradioボタンにカスタムデータ属性が設定されており、そちらのデータで選択可否を判断できたので対応方法をメモ。
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<form>
<label>
<input type="radio" name="radio_1" value="1" data-flg="0">チェック不可
</label>
<label>
<input type="radio" name="radio_1" value="2" data-flg="1">チェック可
</label>
<label>
<input type="radio" name="radio_1" value="3" data-flg="1">チェック可
</label>
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="radio_1"]').on('click', function(){
if( !$(this).data('flg') ){
return false;
}
});
});
</script>
</body>
</html>
data-flgが0の場合は選択不可という挙動になる。尚、「return false」じゃなく「$(this).prop('checked', false)」で対応した場合、以下の違いがある。
「return false」の場合
チェック可のラジオボタンを選択→チェック不可のラジオボタンをクリックした際、チェック可のラジオボタンはチェックされたまま。
「$(this).prop('checked', false)」の場合
チェック可のラジオボタンを選択→チェック不可のラジオボタンをクリックした際、チェック可のラジオボタンはチェックが外れる。
関連記事
-
-
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法
jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データを ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...