勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

   2023/10/25  jQuery JavaScript

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 JavaScript

  関連記事

アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法

アンカータグをクリックしてもブラウザのURL欄に「#hoge」のようなハッシュを ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jQueryのdatetimepickerでスクロール入力を無効化させる方法

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

htmlタグが入った内容の文字を丸める

phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...