jQueryまたはJavaScriptで、押したボタンがdisabledかどうかを判定したい。

buttonタグやinputタグやaタグなどのボタンが並ぶ場合、押したボタンがdisabled状態のチェックボックスかを判定する方法をご教示いただけないでしょうか。

下記は動作サンプルです。
サンプル
サンプルにつきましては、「肉」と「野菜」がチェックボックスで、「漬物」がaタグ、その他はbuttonタグになっています。
ボタンを押すと各ボタン名のアラートが出ます。
チェックボックスはチェックをすると赤色になり、ボタン群下のdisabledボタンを押すと、チェックボックスそれぞれがdisabledになり灰色になります。

実現したいことをサンプルにおいて言えば、disabled状態のチェックボックスを押した場合、アラートでdisabledを表示したいです。

ソースコード

javascript
1// 各ボタンアラート
2$("#kome").click(function () {
3    alert("お米");
4});
5$("#niku").click(function () {
6    if ($("#niku").prop("checked")) {
7        alert("肉");
8    };
9});
10$("#shiru").click(function () {
11    alert("味噌汁");
12});
13$("#yasai").click(function () {
14    if ($("#yasai").prop("checked")) {
15        alert("野菜");
16    };
17});
18$("#tsuke").click(function () {
19    alert("漬物");
20});
21$("#dessert").click(function () {
22    alert("デザート");
23});
24
25// チェックボックスをdisabledにするボタン
26$("#nikuDisabled").click(function () {
27    disabled($("#niku")[0]);
28});
29$("#yasaiDisabled").click(function () {
30    disabled($("#yasai")[0]);
31});
32var disabled = function (check) {
33    var obj = check;
34    if (obj.disabled === true) {
35        obj.disabled = false;
36        return;
37    };
38    obj.disabled = true;
39};
40
41// 機能しません
42$(".buttons").click(function () {
43    if ($(this).prop("disabled")) {
44        alert("disabled");
45    };
46});

html
1<body>
2    <button class="buttons" id="kome">お米</button>
3    <input id="niku" class="check" type="checkbox">
4    <label class="buttons" for="niku">肉</label>
5    <button class="buttons" id="shiru">味噌汁</button>
6    <input id="yasai" class="check" type="checkbox">
7    <label class="buttons" for="yasai">野菜</label>
8    <a class="buttons" id="tsuke">漬物</a>
9    <button class="buttons" id="dessert">デザート</button>
10
11    <br>
12    <button id="nikuDisabled">肉disabled</button>
13    <button id="yasaiDisabled">野菜disabled</button>
14
15    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"</script>
16</body>

css
1html{
2    text-align: center;
3}
4
5a {
6    color: black;
7}
8
9.buttons {
10    display: inline-flex;
11    border: 1px solid black;
12    background-color: white;
13    font-size: 1em;
14    padding: 1%;
15    margin: 2%;
16    cursor: pointer;
17}
18
19.check {
20    display: none;
21}
22
23.check:checked + label {
24    background-color: red;
25    color: white;
26    cursor: default;
27}
28
29.check:disabled + label {
30    background-color: gray;
31    color: white;
32    cursor: default;
33}

追記

disabled状態の要素にイベントを組み込めないことを知りませんでしたので、大変勉強になりました。
ありがとうございました。

「押したボタンがdisabledでなければイベントを発火」は、実装することは可能でしょうか。
「ボタン群にリップルエフェクト施し、disabled時はリップルエフェクトを適用しない」という機能にしたいです。
下記サンプルは冒頭のサンプルのボタンにリップルエフェクトを施したものです。
アラートは削除しました。

サンプル2

ただし上記サンプルのJavaScriptの最後に下記のコードを記述したのですが、機能しませんでした。

javascript
1$(".buttons").click(function () {
2    if (!$(this).prop("disabled")) { // 押したボタンがdisabledでなければ発火
3        $(".buttons").ripple(); // .ripple()メソッドで指定したセレクタにリップルエフェクト適用
4    };
5});

上記コードはdisabled状態のボタンにイベントを組み込ませているわけではない、という認識なのですが、みなさまがご回答いただきました意味と同義なのでしょうか。

行動規範の内容に同意します

回答4件

disabled状態のチェックボックスを押した場合、アラートでdisabledを表示したいです。

disabledのボタンは、押してもイベントが発生しません。押した時に何かを起こさせたい場合、disabledをかけてはいけません。

投稿2019/09/17 23:48

maisumakun

総合スコア145970

MajinBoo

2019/09/18 02:14

ご回答いただきありがとうございます。disabledのボタンは操作を受付ないのですね。知りませんでしたので勉強になりました。また、実装したいことを変更した旨をソースコードの後に追記いたしましので、よろしければご確認のうえご回答やコメントをいただけますと幸いです。

行動規範の内容に同意します

disabledのボタンからはクリックイベントが発火できないので、ボタンの形を残したいのであれば、強引な方法にはなりますが、ボタン1つ1つをspanやdivなどで囲み、そちらでクリックイベントを呼び出す方法があるかもしれません

HTML
1<span class="buttonBox">
2    <button class="buttons" id="dessert">デザート</button>
3</span>

JavaScript
1$(".buttonBox").click(function () {
2    if ($(this).children(".buttons:first").prop("disabled")) {
3        alert("disabled");
4    };
5});

投稿2019/09/18 01:18

q_sane_q

総合スコア610

MajinBoo

2019/09/18 02:13 編集

ご回答いただきありがとうございます。試してみます。試してみてからコメントをしろよって感じですが、取り急ぎ御礼申し上げます。また、実装したいことを変更した旨をソースコードの後に追記いたしましので、よろしければご確認のうえご回答やコメントをいただけますと幸いです。

x_x

2019/09/18 02:39

IE 以外でこの方法を採用する場合、 :disabled { pointer-events: none; } が必要になってきます

q_sane_q

2019/09/18 03:25

ご指摘ありがとうございます、確かにcssに書いておく必要がありますね。リップルについてはjQuery標準ではなくプラグインのようですね。ドキュメントをみたところ、 ripple() ではなく ripples() ではないでしょうか？少し触ってみましたが、背景画像などはそれで波紋が動き始めました。

MajinBoo

2019/09/18 04:23 編集

https://github.com/matthias-vogt/legitRipple.js 左記ページのプラグインを使用しております。左記ページのUsageの項の冒頭使用例はripple()となっているようです。サンプル2でもripple()と記述しておりまして、ボタンをクリックすると一応（1回目のクリックでは発動しませんが）リップルエフェクトが生じます。ripples()にするとリップルエフェクトが適用されませんでした。もしかたら見ているページが違うかもしれませんね。

q_sane_q

2019/09/18 06:08

違うプラグインの情報を見てしまっていたようです、混乱させてしまい申し訳ございません。今開発の環境が動かせずおそらくになってしまうのですが、 .ripple()は「エフェクトを動かす」のではなく「クリックされたときにエフェクトが動くように要素に設定する」メソッドなのではないでしょうか？ jQueryだとdraggableなどもそのようになっていたと思いますので。 1回目のクリックで動かないのは、1回目のクリックイベントで.ripple()が呼ばれそこでエフェクトが設定されているからかもしれません

MajinBoo

2019/09/18 23:06

プラグイン情報を記載しなかったためにお手間を掛けさせてしまい申しわありませんでした。先のコメントでお知らせしたプラグインは専用のjsファイルとcssファイルをインストールする必要があるため、クリックした際にcssが設定されたクラス名を付与する形式かと思われます。そのため1回目のクリックでクラス名が付与され、2回目のクリックでリップルエフェクト適用される、という流れかもしれません。とはいえプラグインのデモでは1回目のクリックからリップルエフェクトが適用されますし、上記の仕様だとプラグインとして問題ありなのでリリースするとは考えにくいので、私の使い方が間違っている可能性が高いです。なのでプラグインの使い方を改めて読みます。

行動規範の内容に同意します

<input> のエレメントに disabled の属性が設定されている場合、当該エレメントは「not mutable」（変化できない）であると規定されています。
そして not mutable であるエレメントは、入力を受け付けてはいけないのです。従ってイベントも発生しません。

つまり、onClick なり何なりで disable 状態のエレメントをクリックした、というのを取ることはできないのです。

どうしてもというなら window 全体の onclick イベントで、クリックした座標からエレメントを特定して、そのエレメントの属性見るとかはできますが……

投稿2019/09/18 00:01

tacsheaven

総合スコア13703

MajinBoo

2019/09/18 02:13 編集

ご回答いただきありがとうございます。not mutable＝可変できない、ということですね。クリックの度に座標を取得するのはパフォーマンス性を損ないそうな気がするので、他の方法は無いのでやらざるを得ない場合になったら試してみようと思います。また、実装したいことを変更した旨をソースコードの後に追記いたしましので、よろしければご確認のうえご回答やコメントをいただけますと幸いです。

行動規範の内容に同意します

ベストアンサー

こんにちは

ご質問に追記されている、サンプル2　の修正案を回答します。
JavaScript の最後にあるコードを、以下のように修正するといかがでしょうか？

修正前

javascript
1$(".buttons").click(function () {
2    if (!$(this).prop("disabled")) {
3        $(".buttons").ripple();
4    }
5});

修正後

javascript
1$(".buttons").click(function () {
2    var e = this.tagName === 'LABEL' ? $('#' + $(this).attr("for")) : $(this);
3    if (!e.prop("disabled")) {
4        $(this).ripple();
5    }
6});
7
8$("label").mouseover(function() {
9    var check = $('#' + $(this).attr("for"));
10    if (check.prop("disabled")) {
11        $(this).removeClass("legitRipple");
12    }
13});

以下は、サンプル2　をコピーして、上記の修正をしたものです。

修正後 JS Bin: https://jsbin.com/yaguwes/edit?js,output

上記の修正によって、「肉」と「野菜」については、ご質問にある

「ボタン群にリップルエフェクト施し、disabled時はリップルエフェクトを適用しない」という機能にしたいです。

との要件が満たされていると思います。（「肉」と「野菜」以外のボタンについても同様にする場合、さらにもう少し手直しが必要かもしれません。）

以上、参考になれば幸いです。

投稿2019/09/18 16:20

編集2019/09/18 16:48

jun68ykt

総合スコア9058

MajinBoo

2019/09/18 22:51

サンプルを確認させていただいたら希望通りの機能でした。本当にありがとうございました。「修正後」コードを拝見してから気づきましたが、labelタグに付いたクラス名.buttonsでは、input（チェックボックス）の状態は判定できないですね。なんとも間抜けなコードを書いておりました。 labelタグがあればlabelタグのid属性値を取得してdisabledの判定に使用し、labelタグhover時にdisabledであれば、リップルエフェクトを適用するクラス名を削除する、ということでしょうか。なにはともあれ重ねてになりますが、ありがとうございました。

jun68ykt

2019/09/19 00:51

どういたしまして。 > labelタグがあれば・・・ということでしょうか。はい。そんな感じです。回答に書いたコードは、かなり対症療法になっている気もしますが、ひとまず > 希望通りの機能でした。とのことでよかったです????

行動規範の内容に同意します

あなたの回答