JavaScript:特定の要素を配下の要素も含めて有効・無効(disabled)を制御する

イントロダクション

フォーム内に配置したボタンやチェックボックス、テキストボックスなどに対して、まとめて有効・無効を制御したいと思いいろいろと調べてみましたが、一行で実行する方法は無いようです。

てっきり、最上位の要素に対して有効・無効を設定したら、その配下の要素もまとめて有効・無効が連動してくれるのかと思っていましたが、違ったようです。(*1)

*1
実際に、最上位の form の disabled の true/false を変更してみましたが、その配下の要素の有効・無効状態には影響がありませんでした。


そこで、指定した id の要素以下のすべての要素の有効・無効を切り替えるコードを作成してみました。

コード

// 全てを無効にする
function disableAll(id) {

    var obj = document.getElementById(id);
    setDisableAll(obj, true);
    
}

// 全てを有効にする
function enableAll(id) {

    var obj = document.getElementById(id);
    setDisableAll(obj, false);
}

function setDisableAll(obj, disabled) {

    obj.disabled = disabled;
    for (var i = 0; i < obj.childNodes.length; i++) {
        setDisableAll(obj.childNodes[i], disabled);
    }

}

まとめ

これで、指定した id の要素以下のすべての要素の有効・無効を切り替えることができるようになりました。