JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年04月 / 03月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>05月

アクセスランキング

[ジャンルランキング]
コンピュータ
395位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
51位
アクセスランキングを見る>>

ボタンを有効にする/無効にする

要するに、↓みたいなボタンがあるときに、そのボタンの有効・無効を切り替える方法ってことです。


.NETでは「enable」or「disable」で変更しますが、HTML(JavaScript)では、「disabled」or「空白」で変更します。
ボタンのインスタンス(操作実体)をgetElementByIdなどで取得し、それに対して操作を行います。

基本形


HTML

<input type="button" id="ID名" value="ボタン">


JavaScript

変数 = document.getElementById("ID名");

//無効にする
変数.disabled = "disabled";

//有効にする
変数.disabled = "";



使用例
<html>
<head>
<title>ボタン有効/無効変更</title>
<script type="text/javascript">
function enable_button(){
    document.getElementById("button1").value = "   有効   ";
    document.getElementById("button1").disabled = "";
}
function disable_button(){
    document.getElementById("button1").value = "   無効   ";
    document.getElementById("button1").disabled = "disabled";
}
</script>
</head>
<body>
<input type="button" onclick="alert('click')" id="button1" value="   有効   ">
<a href="#" onclick="enable_button()">有効</a> <a href="#" onclick="disable_button()">無効</a>
</body>
</html>


IDを直接指定する場合の例

有効にする
document.getElementById("button1").disabled = "";

無効にする
document.getElementById("button1").disabled = "disabled";


サンプル:enable_disable_button_sample.html

WEBアプリなどでボタンの連打や処理が終わる前に再びクリックされたりすることを防ぐときに便利な方法ですよね。(フラグを立ててチェックって方法もありますがこの方法ならクリックすること自体ができなくなり分かりやすいUIが作れるので)
 


 
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。