[JavaScript]disabledでボタンを非活性にするサンプル

2021年10月27日

書式
disabledになっているか確認
if(document.getElementById(セレクタID).disablee ==true)
disabled属性を削除
document.getElementById(セレクタID).removeAttribute(“disabled");

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p><input type="button" id="reg" value="登録"> </p>
<!--ボタンを押すと、change関数を呼び出す -->
<p><input type="button" value="変更" onclick="change()"></p>
<script>
function change(){
// disabledかどうか確認
if (document.getElementById("reg").disabled === true){
// disabled属性を削除
document.getElementById("reg").removeAttribute("disabled");
// 文字の色を赤にする
document.getElementById("reg").style.color = "red";
}else{
// disabled属性を設定
document.getElementById("reg").setAttribute("disabled", true);
//文字の色をグレーにすつ
document.getElementById("reg").style.color = "gray";
}
}
</script>
<p><input type="button" id="reg" value="登録"> </p> <!--ボタンを押すと、change関数を呼び出す --> <p><input type="button" value="変更" onclick="change()"></p> <script> function change(){ // disabledかどうか確認 if (document.getElementById("reg").disabled === true){ // disabled属性を削除 document.getElementById("reg").removeAttribute("disabled"); // 文字の色を赤にする document.getElementById("reg").style.color = "red"; }else{ // disabled属性を設定 document.getElementById("reg").setAttribute("disabled", true); //文字の色をグレーにすつ document.getElementById("reg").style.color = "gray"; } } </script>
<p><input type="button" id="reg" value="登録"> </p>
<!--ボタンを押すと、change関数を呼び出す -->
<p><input type="button" value="変更" onclick="change()"></p>
<script>
function change(){
       // disabledかどうか確認
      if (document.getElementById("reg").disabled === true){
            // disabled属性を削除
            document.getElementById("reg").removeAttribute("disabled");
        // 文字の色を赤にする
            document.getElementById("reg").style.color = "red";
      }else{
            // disabled属性を設定
            document.getElementById("reg").setAttribute("disabled", true);
        //文字の色をグレーにすつ
            document.getElementById("reg").style.color = "gray";
      }
}
</script>

実行結果
「変更」のボタンを押すと、「登録」ボタンが活性、非活性で切り替わります

JavaScript

Posted by arkgame