ボタンのクリックの可否を、ユーザにわかりやすく制御する【HTML・CSS・JQuery】

JavaScript

2022.06.202022.07.03

ウェブサービスを作る際に、ボタンを設置するケースが多くあります。

フォームの入力内容等によって、クリック可能・不可能を変えるケースもあるのですが、これが分かりにくいとユーザが混乱する原因にもなります。

今回は、クリックの可否の判別をしやすいボタンの設置方法について、解説していきます。

作ってるフォームのボタンがクリックできるのかどうか、

いまいちぱっとわかりにくいんですよね・・・

CSS・JSを組み合わせると、

状態が判別しやすいボタンが簡単に作れるよ

ソースコード全文・サンプル（HTML、CSS、JQuery）

下画面右のサンプルにて、上2つのボタンをクリックすることで、下のメインボタンのクリック可否を切り替えられます。

単にボタンを並べて、クラス名をつけているだけなので省略。

基本的には、背景色と文字色を変更しているだけですが、マウスポインタに関する内容のみ解説します。

クリック可能時には、以下を指定します。

/* メインボタン、クリック可能時 */
.mainButton{
     ・・・
     cursor: pointer
     opacity: 0.7
}

/* メインボタン、hover時 */
.mainButton:hover {
  opacity:1;
}

cursor: pointerを指定することで、マウスポインタを変更します。

また、hover時にはボタンのopacityを変えることで、ボタン色を濃くしてクリック可能であることを強調します。

以下を指定します。

pointer-events: none;

これによってクリック不可時にはマウスポインタが変わらなくなり、hoverも反応しなくなります。

.mainButtonに、disabledを設定します。

//ボタンをクリック不可にする
$(".mainButton").prop('disabled',true);

クリック不可にする際の逆をするだけです。

//ボタンをクリック可能にする
$(".mainButton").prop('disabled',false);

ボタンの見た目を変える、ボタンをクリック不可にする等、個別に行うことは簡単です。

しかし、それぞれが連動していないと、「一見押せそうな見た目のボタンがクリックできない」ということになってしまうので気をつけましょう。