ELLの足跡

人は最後は一人だという…でも、…今は妻が傍にいてくれる…

ボタンのクリックを一回しか出来ないようにする方法

送信ボタンなどで、同じ内容を何回も送信されてしまう場合がありますよね・・・

それを避ける為に、クリックを一回してしまうと画面を更新しない限り二度とクリックできない様にすることは可能です


  1. 先ずボタンを創ります・・・
    <input type="button" value="クリックは一回だけしか出来ません!">
    これで下の図の様なボタンは出来ますが、これでは何回もクリック出来てしまいます


  2. では、どのようにすれば良いのか・・・input要素の中にonclick="disabled=true;"を加えます

  3. 下のように記述すれば、OKなのです・・・
    <input type="button" value="クリックは一回だけしか出来ません!" onclick="disabled=true;">


  4. すると、クリックを一回してしまうと、下の図のようにグレーになってしまいます
    ※ このブログでは表示できませんので、
      下の図をクリックして、実際に体感してみて下さい!



  5. 但し、再度クリックして貰うにはブラウザの更新ボタンを押して更新して貰わなくてはいけません。




今日の小技は如何でしたか?