読者です 読者をやめる 読者になる 読者になる

ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:要素が有効な場合のみ、チェックされているか判定する方法

スポンサーリンク

ラジオボタンAの選択によって、別のラジオボタンBの有効/無効状態を切り替えている場合に、JavaScriptラジオボタンBがチェックされているかチェックをすると、ラジオボタンBが無効状態でもチェックはできてしまいます。

そのため、ラジオボタンAの選択を確認して、ラジオボタンBが有効になる選択をしていたら、ラジオボタンBのチェックをするようにしています。

if ($("input[name=radioa]:checked").val() == "1") {
    if (!$("input[name=radiob]").checked()) {
        alert("Error");
    }
}

f:id:AJYA:20170511125933j:plain
photo credit: Christiaan Colen JavaScript source code ransomware via photopin (license)

要素自体の有効/無効状態を判定に使う

上記の方法でも目的は果たせていますが、ラジオボタンAがラジオボタンCに変わったり、別の要素に変わると、その都度修正が必要になります。
そのため、他の方法がないかと考えて、ラジオボタンB自体が無効かどうか判断できればいいのではと思いつきました。

どうすればラジオボタン自体が無効かどうか判断できるか調べたところ、typeof演算子を使えばできました。
developer.mozilla.org

実際のソースコードは以下のようにしました。

if (typeof $("input[name=radiob]").attr("disabled") === "undefined") {
    if (!$("input[name=radiob]").checked()) {
        alert("Error");
    }
}

typeofで、無効状態が未定義であるということは、有効状態ということになるので、その後の処理を行っています。
これで少しはわかりやすくなった気がします。