- ベストアンサー
Javascriptでボタンのdisabled状態を制御する方法
- Javascriptを使用して、ボタンの最初の状態をdisabledに設定し、一定時間後に有効化する方法について教えてください。
- さらに、ボタンをクリックすると即座にdisabled状態になり、5秒後に解除されるようにする方法も知りたいです。
- また、この方法は<head>内で記述され、複数のボタンに適用できるようにしたいです。一定時間の個別設定もできると助かります。
- kirbys
- お礼率5% (3/53)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <head> <script> window.onload=function(){ clrTmbtn('a',1000); clrTmbtn('b',2000); clrTmbtn('c',3000); } function clrTmbtn(i,t){ setTimeout("disbtn('"+i+"')",t);} function disbtn(i){ if(typeof(i)=='object') obj=i; else obj=$(i); obj.disabled = !obj.disabled;} function $(i){ return document.getElementById(i);} function exe1(){ //適当な処理 } </script> <body> １秒置きに解除。クリック後、数秒で解除 <input type="button" id="a" value="test1" disabled onClick="disbtn(this);exe1();clrTmbtn('a',1000)"><br> <input type="button" id="b" value="test2" disabled onClick="disbtn(this);exe1();clrTmbtn('b',2000)"><br> <input type="button" id="c" value="test3" disabled onClick="disbtn(this);exe1();clrTmbtn('c',3000)"><br> </body> </html>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
#2です。 書き忘れましたがあくまでサンプルです。 他にjavascript使ってると、その内容によっては一方がもう一方に干渉して動きません。 どちらか、あるいは両方手直しする必要があるかも。
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。 設定が何番目か、って事で面倒だけど、body内には手を加えたくないようなので… せめてIDでも付けられればもっと簡単になります。 <html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript"> var setting = { 0:3000, // 0番目のdisabledのinputは3秒間無効化 1:5000 // 1番目のdisabledのinputは5秒間無効化 } window.onload = function(){ var INP = document.getElementsByTagName('input'); var x = 0; for(var i=0;INP[i];i++) { if(INP[i].disabled) { setting[x] = [setting[x],INP[i]]; INP[i].onclick=Function('ocH('+x+')'); ocH(x); x++; } } } function ocH(x){ setting[x][1].disabled = true; setTimeout( Function('setting['+x+'][1].disabled = false;'), setting[x][0]); } </script> </head> <body> <form onsubmit="return false"> <input type="text" name="A" value="bbb"> <input type="submit" value="送信ボタン1" disabled> </form> <p> <input type="button" value="ボタン1" disabled> </p> </body> </html>
- SAYKA
- ベストアンサー率34% (944/2776)
setTimeout() を使ったら良いんじゃない？ http://www.tohoho-web.com/js/window.htm#setTimeout
補足
わかりました。 IDとOnclick=""を使えるともう少し簡単になりますか？ もし使いやすくなるんで在れば、お願いします。