jQuery attrとremoveAttrでテキストボックスを無効または有効にする

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

構文
1.テキストボックスを無効にします
$(“#テキストボックスのID名).attr('disabled’,’disabled’);
attr関数を使ってテキストボックスのdisabledを設定します。

2.テキストボックスを有効にします
$(“#テキストボックスのID名").removeAttr('disabled’);
removeAttr関数を使ってテキストボックスのdisabled属性を削除します

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#show').click(function() {     
      var flg = $("#name").attr('disabled');
       if(flg === undefined){
            //テキストボックスを無効にする
           $("#name").attr('disabled','disabled');
        } else {
          //テキストボックスを有効にする
          $("#name").removeAttr('disabled');
        }
    })
});
</script>
</head>
<body>

<div id="cft">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
</div>
<br>
<button id="show">表示</button>

</body>
</html>

実行結果
「表示」ボタンを押すと、テキストボックスを無効にします。
再度「表示」ボタンを押すと、テキストボックスを有効にします。

jQuery

Posted by arkgame