質問: お世話になります。 HTMLおよびJavascriptで質問です。 以下のようなHTMLファイル、text.htmlを作成しました。 ``` 属性の変更テスト 属性の変更テスト このテキストを選択したらTextが有効になるはず このテキストを選択したらTextが無効になるはず ``` Text_1というテキストボックスがあり、disabled属性で入力不能になっています。 scriptタグで2つの関数が定義されています。 1つめのmakeTextEnabled()を呼ぶとText_1のdisable属性を無効にし、required属性を有効にしたいと思っています。 2つめのmakeTextDisabled()を呼ぶとText_1のdisable属性を有効にし、required属性を無効ににしたいと思っています。 その下に2つのtextareaがあります。 1つめの「このテキストを選択したらTextが有効になるはず」を選択すると、onselect()イベントが発火してmakeTextEnabled()が実行されるようにしたつもりです。 2つめの「このテキストを選択したらTextが無効になるはず」を選択すると、やはりonselect()イベントでmakeTextDisabled()が実行されるようにしたつもりです。 現在のところは以下のとおりです。 * 初期状態では、Text_1は目論見通り無効になっています。 ![初期状態](https://i.stack.imgur.com/C8CvX.png) * 1つめのテキストを選択すると、Text_1のdisableは外れましたが、requredはつきませんでした。 ![1つめの関数は半分うまくいった](https://i.stack.imgur.com/GX5dv.png) * 2つめのテキストを選択すると、Text_1のdisableは復活しませんでした。requredはつきませんでした。 ![2つ目の関数は全然うまくいかなかった](https://i.stack.imgur.com/mhbxX.png) で、質問としては、 1. 1つめのテキストを選択してもrequiredがつかないのはなぜでしょうか? 2. 1つめのテキストを選択してもdisabledがつかないのはなぜでしょうか? ブラウザーは必ずChromeです。 どうぞよろしくお願いいたします。
回答: `setAttribute()`に第2引数を渡していないためです。 ``` 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); } ``` あるいはプロパティを使うという手もあります。 ``` 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; } ```