[JavaScript] フォーム部品のDisable/Enableを切り替える

投稿日：2016年10月8日更新日：2018年5月3日

テキストボックスやボタンなどのDisable/Enableを切り替えるサンプルです。

サンプルソース

例）ボタンを押すたびにテキストボックスのDisableとEnableを切り替える

function changeDisabled(){
  var obj = document.getElementById("txt1");
  if(obj.disabled == true){
    obj.disabled = false;  //Enableに設定
  }else{
    obj.disabled = true;   //Disableに設定
  }
}

function changeDisabled(){

var obj = document.getElementById("txt1");

if(obj.disabled == true){

obj.disabled = false; //Enableに設定

}else{

obj.disabled = true; //Disableに設定

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" value="hoge" id="txt1" />
  <input type="button" value="ボタン" onclick="changeDisabled();" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、各フォーム部品のEnable/Disableが切り替わります。

　チェックボックス

　ラジオボタン

解説

Enable/Disableを設定するには、disabledプロパティにtrue/falseを設定します。
disabled=trueの要素はsubmitされません。
disabled=trueの要素は文字選択不可です。
readOnlyを使う方法もあります。詳しくは以下をご覧ください。
→「テキストボックスを読み取り専用にする」
※readOnlyはテキストボックス、テキストエリアのみ使用可能です。

執筆者：とら