ラジオボタンをreadonlyっぽくする実用的コード【HTML/JSP/Java】｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━ [閉じる]

Web開発をし始めた人達は、

「なんでラジオボタンはreadonlyないねん！！」

って誰もが最初は思ったことでしょう。

業務でもよく使うので、disabledにしてhiddenに値設定してsubmit、、、とかやってましたが、

めんどくさいし、分かり辛い！！

ということでラジオボタンを分かり易くreadonlyっぽく動かすコードを共有します。

ラジオボタンをreadonlyっぽくするには

どうするかと言うと、

チェックが入っている項目以外をdisabledにする

ことで解決します。

HTMLだけで言うと、以下のようにします。

<input type="radio" id="radioA" name="radioA" value="1" disabled="disabled" /><label for="radioA" >A</label><br>
<input type="radio" id="radioB" name="radioB" value="2" /><label for="radioA" >B</label><br>
<input type="radio" id="radioC" name="radioC" value="3" disabled="disabled" /><label for="radioA" >C</label>

こうすることでsubmitしても選択しているラジオのvalue値は送信されますし、他のラジオを選択することもできないのでテキストボックスで言うところのreadonlyと同じ動きになります。

じゃけぇ

実際にJavaと絡めて実務で使うことを想定したコーディングは↓を見てね

Javaと連携して実務で使えるようにするには

実際にはDBの値によってラジオボタンの選択やdisabledの場所も動的に変わると思います。

それを想定したソースが以下になります。

【HTML/JSP】

<input type="radio" id="radioA" name="radioA" value="1" ${testForm.radioAchecked} ${testForm.radioAdisabled} /><label for="radioA" >A</label><br>
<input type="radio" id="radioB" name="radioB" value="2" ${testForm.radioBchecked} ${testForm.radioBdisabled} /><label for="radioA" >B</label><br>
<input type="radio" id="radioC" name="radioC" value="3" ${testForm.radioCchecked} ${testForm.radioCdisabled} /><label for="radioA" >C</label>

【Java】

//フォームに値を設定する部分
//チェック状態を決定する
testForm.setRadioAchecked(funcGetCheckStatus("A", /*DB値*/));
testForm.setRadioBchecked(funcGetCheckStatus("B", /*DB値*/));
testForm.setRadioCchecked(funcGetCheckStatus("C", /*DB値*/));

//活性・非活性状態を決定する
testForm.setRadioAdisabled(funcGetDisabled(testForm.getRadioAchecked));
testForm.setRadioBdisabled(funcGetDisabled(testForm.getRadioBchecked));
testForm.setRadioCdisabled(funcGetDisabled(testForm.getRadioCchecked));

/**
 * ラジオボタンのチェック状態を設定する
 *
 * @param radioItem 項目（A、B、C）
 *        /*DB値*/ DBの値
 * @return ラジオボタンチェック状態（"checked":チェック、"":未チェック）
 */
private String funcGetCheckStatus(String radioItem, String /*DB値*/) {
    
    //チェック状態
    String checkStatus = "";
    
    //ラジオAのチェック状態
    if ("A".equals(radioItem)) {
        //DB値が何の場合Aにチェックがつくかを記述する。ここでは1
        if ("1".equals(/*DB値*/)) {
            checkStatus = "checked";
        }
    }
    
    //ラジオBのチェック状態
    if ("B".equals(radioItem)) {
        //DB値が何の場合Bにチェックがつくかを記述する。ここでは2
        if ("2".equals(/*DB値*/)) {
            checkStatus = "checked";
        }
    }
    
    //ラジオCのチェック状態
    if ("C".equals(radioItem)) {
        //DB値が何の場合Cにチェックがつくかを記述する。ここでは3
        if ("3".equals(/*DB値*/)) {
            checkStatus = "checked";
        }
    }
    return checkStatus;
}

/**
 * ラジオボタンの活性・非活性状態を設定する
 *
 * @param checkStatus チェック状態（"checked":チェック、"":未チェック）
 * @return ラジオボタン活性・非活性状態（"":活性、"disabled":非活性）
 */
private String funcGetDisabled(String checkStatus) {
    
    //活性・非活性状態
    String disabledFlg = "";
    
    //対象項目が未チェックの場合は非活性にする
    if ("".equals(checkStatus)) {
        disabledFlg = "disabled";
    }
    return disabledFlg;
}

//フォームに値を設定する部分

//チェック状態を決定する

testForm.setRadioAchecked(funcGetCheckStatus("A", /*DB値*/));

testForm.setRadioBchecked(funcGetCheckStatus("B", /*DB値*/));

testForm.setRadioCchecked(funcGetCheckStatus("C", /*DB値*/));

//活性・非活性状態を決定する

testForm.setRadioAdisabled(funcGetDisabled(testForm.getRadioAchecked));

testForm.setRadioBdisabled(funcGetDisabled(testForm.getRadioBchecked));

testForm.setRadioCdisabled(funcGetDisabled(testForm.getRadioCchecked));

/**

* ラジオボタンのチェック状態を設定する

* @param radioItem 項目（A、B、C）

* /*DB値*/ DBの値

* @return ラジオボタンチェック状態（"checked":チェック、"":未チェック）

private String funcGetCheckStatus(String radioItem, String /*DB値*/) {

//チェック状態

String checkStatus = "";

//ラジオAのチェック状態

if ("A".equals(radioItem)) {

//DB値が何の場合Aにチェックがつくかを記述する。ここでは1

if ("1".equals(/*DB値*/)) {

checkStatus = "checked";

}

//ラジオBのチェック状態

if ("B".equals(radioItem)) {

//DB値が何の場合Bにチェックがつくかを記述する。ここでは2

if ("2".equals(/*DB値*/)) {

checkStatus = "checked";

}

//ラジオCのチェック状態

if ("C".equals(radioItem)) {

//DB値が何の場合Cにチェックがつくかを記述する。ここでは3

if ("3".equals(/*DB値*/)) {

checkStatus = "checked";

}

return checkStatus;

}

/**

* ラジオボタンの活性・非活性状態を設定する

* @param checkStatus チェック状態（"checked":チェック、"":未チェック）

* @return ラジオボタン活性・非活性状態（"":活性、"disabled":非活性）

private String funcGetDisabled(String checkStatus) {

//活性・非活性状態

String disabledFlg = "";

//対象項目が未チェックの場合は非活性にする

if ("".equals(checkStatus)) {

disabledFlg = "disabled";

}

return disabledFlg;

}

フォーム(testForm)に各ラジオボタン項目ごとの「チェック状態」「活性・非活性状態」を定義します。

そしてそれを各ラジオボタンに設定しておけば、あとはJava側で適切な値を設定してやればその通りに動きます。

Java側ではチェック状態を判別するファンクションと活性・非活性状態を判別するファンクションを用意して、フォームに値を詰める部分で呼び出します。

チェック状態を判別するファンクションでは各項目(A,B,C)と、そのDB値を渡すことで「checked」か空文字を返します。

活性・非活性状態を判別するファンクションでは、上記で設定したチェック状態を渡すことで、「チェック状態なら活性」「未チェック状態なら非活性」と判別して「disabled」か空文字を返すだけです。