62288


お世話になります。  
HTMLおよびJavascriptで質問です。  
以下のようなHTMLファイル、text.htmlを作成しました。

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
        <title>属性の変更テスト</title>
      </head>
      <body>
        <h1>属性の変更テスト</h1>
        <form method="get"
          action="https://test.example.com"
          name="TextForm">
    
          <input id="Text_1" type="text" name="Text_1" size=80 disabled /><br />
          <script>
        function makeTextEnabled() {
          document.getElementById('Text_1').removeAttribute("disabled");
          document.getElementById('Text_1').setAttribute("required");
        }
        function makeTextDisabled() {
          document.getElementById('Text_1').removeAttribute("required");
          document.getElementById('Text_1').setAttribute("disabled");
        }
          </script>
    
          <textarea cols="60" rows="2" onselect="makeTextEnabled()">
        このテキストを選択したらTextが有効になるはず
          </textarea><br />
          <textarea cols="60" rows="2" onselect="makeTextDisabled()">
        このテキストを選択したらTextが無効になるはず
          </textarea><br />
    
          <input type="submit" value="submit" />
        </form>
      </body>
    </html> 
    
[/code]

Text_1というテキストボックスがあり、disabled属性で入力不能になっています。

scriptタグで2つの関数が定義されています。  
１つめのmakeTextEnabled()を呼ぶとText_1のdisable属性を無効にし、required属性を有効にしたいと思っています。  
２つめのmakeTextDisabled()を呼ぶとText_1のdisable属性を有効にし、required属性を無効ににしたいと思っています。

その下に2つのtextareaがあります。  
１つめの「このテキストを選択したらTextが有効になるはず」を選択すると、onselect()イベントが発火してmakeTextEnabled()が実行されるようにしたつもりです。  
２つめの「このテキストを選択したらTextが無効になるはず」を選択すると、やはりonselect()イベントでmakeTextDisabled()が実行されるようにしたつもりです。

現在のところは以下のとおりです。

  * 初期状態では、Text_1は目論見通り無効になっています。   
[![初期状態](https://i.stack.imgur.com/C8CvX.png)](https://i.stack.imgur.com/C8CvX.png)

  * １つめのテキストを選択すると、Text_1のdisableは外れましたが、requredはつきませんでした。   
[![１つめの関数は半分うまくいった](https://i.stack.imgur.com/GX5dv.png)](https://i.stack.imgur.com/GX5dv.png)

  * ２つめのテキストを選択すると、Text_1のdisableは復活しませんでした。requredはつきませんでした。   
[![２つ目の関数は全然うまくいかなかった](https://i.stack.imgur.com/mhbxX.png)](https://i.stack.imgur.com/mhbxX.png)

で、質問としては、  
1\. １つめのテキストを選択してもrequiredがつかないのはなぜでしょうか？  
2\. １つめのテキストを選択してもdisabledがつかないのはなぜでしょうか？

ブラウザーは必ずChromeです。  
どうぞよろしくお願いいたします。


CC BY-SA 4.0
2020-01-16T04:06:52.970
62279
2020-01-16T07:52:49.667
26673
question
javascript html form
HTMLフォームのsetAttribute、removeAttributeが効きません


`setAttribute()`に第2引数を渡していないためです。

[code]

        function makeTextEnabled() {
          document.getElementById('Text_1').removeAttribute("disabled");
          document.getElementById('Text_1').setAttribute("required", true);
        }
        function makeTextDisabled() {
          document.getElementById('Text_1').removeAttribute("required");
          document.getElementById('Text_1').setAttribute("disabled", true);
        }
    
[/code]

あるいはプロパティを使うという手もあります。

[code]

        function makeTextEnabled() {
          document.getElementById('Text_1').disabled = false;
          document.getElementById('Text_1').required = true;
        }
        function makeTextDisabled() {
          document.getElementById('Text_1').required = false;
          document.getElementById('Text_1').disabled = true;
        }
    
[/code]


CC BY-SA 4.0
2020-01-16T07:52:49.667
62288
2020-01-16T07:52:49.667
241
62279
answer