【Visualforce】inputFieldを非活性にする（readonly、disabled）

画面操作でinputFieldの活性／非活性を切り替えるような動きをさせたい場合。
方法はいくつかあると思いますが、今回はJavascriptを使用する例を紹介します。

さっそくサンプル

<!-- Visualforceページ -->
<apex:page id="pg" standardController="Account">
    
    <script>
        // 活性、非活性の切り替え
        function changeReadOnly() {
            
            var aaa = document.getElementById("pg:frm:aaa");
            var name = document.getElementById("pg:frm:name");
            
            // 活性／非活性リスト値の判定
            if (aaa.value == "非活性") {
                name.disabled = true;
            } else if (aaa.value == "活性") {
                name.disabled = false;
            }
        }
        
        // 画面読み込み時
        window.onload = function(){
            // 活性／非活性の切り替え
            changeReadOnly();
        }
    </script>

    <apex:form id="frm">
        <div style="display:inline-flex">
            <!-- 活性／非活性選択リスト -->
            <apex:selectList id="aaa" onclick="changeReadOnly();" size="1">
                <apex:selectOption itemValue="非活性" itemLabel="非活性" />
                <apex:selectOption itemValue="活性" itemLabel="活性" />
            </apex:selectList>
            <!-- テキスト -->
            <apex:inputField id="name" value="{!Account.Name}" />
        </div>
    </apex:form>
</apex:page>

<apex:page id="pg" standardController="Account">

// 活性、非活性の切り替え

function changeReadOnly() {

var aaa = document.getElementById("pg:frm:aaa");

var name = document.getElementById("pg:frm:name");

// 活性／非活性リスト値の判定

if (aaa.value == "非活性") {

name.disabled = true;

} else if (aaa.value == "活性") {

name.disabled = false;

}

// 画面読み込み時

window.onload = function(){

// 活性／非活性の切り替え

changeReadOnly();

}

</script>

<apex:form id="frm">

<apex:selectList id="aaa" onclick="changeReadOnly();" size="1">

<apex:selectOption itemValue="非活性" itemLabel="非活性" />

<apex:selectOption itemValue="活性" itemLabel="活性" />

</apex:selectList>

<apex:inputField id="name" value="{!Account.Name}" />

</div>

</apex:form>

</apex:page>

上記VF画面を表示すると、まずはテキストが非活性状態で表示されます。
（19～23行目で、画面読み込み時にもchangeReadOnly()を実行しているので）

左側の選択リストを”活性”に変更すると、テキストが活性状態になります。

8～9行目、Javascriptでコンポーネントの値を参照する書き方は過去記事をどうぞ。
【Visualforce】JavascriptからgetElementByIdで値を参照する方法