テキストボックスに何も入力されていなかったらボタンをクリックできなくしたい
クリックできなくする
element.disabled = true;
クリックできるようにする
element.disabled = false;
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <body> <input type="text" id="tb"> <button id="bt" disabled>ボタン</button> <script> var tb_elem = document.getElementById("tb"); var button_elem = document.getElementById("bt"); tb_elem.onkeyup = on_keyup; function on_keyup() { if (tb_elem.value != "") { button_elem.disabled = false; } else { button_elem.disabled = true; } } </script> </body> </html> |
意訳これはHTML5文書です テキストボックスを置く ボタンを置く(クリックを無効にしておく) idがtbの要素(テキストボックス)を取得する idがbtの要素(ボタン)を取得する テキストボックスでキーが上がったらon_keyupを実行する この機能がやること もしテキストボックスが空なら ボタンをクリックできない状態にする 空じゃなければ ボタンをクリックできる状態にする |
補足
クリックできなくする別の書き方
element.disabled = "disabled";
クリックできるようにする別の書き方
element.disabled = "";
参考
Button disabled Property
https://www.w3schools.com/jsref/prop_pushbutton_disabled.asp