質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.23%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 2,368

MajinBoo

score 16

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

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

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

ソースコード

// 各ボタンアラート
$("#kome").click(function () {
    alert("お米");
});
$("#niku").click(function () {
    if ($("#niku").prop("checked")) {
        alert("肉");
    };
});
$("#shiru").click(function () {
    alert("味噌汁");
});
$("#yasai").click(function () {
    if ($("#yasai").prop("checked")) {
        alert("野菜");
    };
});
$("#tsuke").click(function () {
    alert("漬物");
});
$("#dessert").click(function () {
    alert("デザート");
});

// チェックボックスをdisabledにするボタン
$("#nikuDisabled").click(function () {
    disabled($("#niku")[0]);
});
$("#yasaiDisabled").click(function () {
    disabled($("#yasai")[0]);
});
var disabled = function (check) {
    var obj = check;
    if (obj.disabled === true) {
        obj.disabled = false;
        return;
    };
    obj.disabled = true;
};

// 機能しません
$(".buttons").click(function () {
    if ($(this).prop("disabled")) {
        alert("disabled");
    };
});
<body>
    <button class="buttons" id="kome">お米</button>
    <input id="niku" class="check" type="checkbox">
    <label class="buttons" for="niku"></label>
    <button class="buttons" id="shiru">味噌汁</button>
    <input id="yasai" class="check" type="checkbox">
    <label class="buttons" for="yasai">野菜</label>
    <a class="buttons" id="tsuke">漬物</a>
    <button class="buttons" id="dessert">デザート</button>

    <br>
    <button id="nikuDisabled">肉disabled</button>
    <button id="yasaiDisabled">野菜disabled</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"</script>
</body>
html{
    text-align: center;
}

a {
    color: black;
}

.buttons {
    display: inline-flex;
    border: 1px solid black;
    background-color: white;
    font-size: 1em;
    padding: 1%;
    margin: 2%;
    cursor: pointer;
}

.check {
    display: none;
}

.check:checked + label {
    background-color: red;
    color: white;
    cursor: default;
}

.check:disabled + label {
    background-color: gray;
    color: white;
    cursor: default;
}

追記

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

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

サンプル2

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

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


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/18 11:14

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

    キャンセル

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/18 11:12 編集

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

    キャンセル

checkベストアンサー

+1

こんにちは

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

修正前

$(".buttons").click(function () {
    if (!$(this).prop("disabled")) {
        $(".buttons").ripple();
    }
});

修正後

$(".buttons").click(function () {
    var e = this.tagName === 'LABEL' ? $('#' + $(this).attr("for")) : $(this);
    if (!e.prop("disabled")) {
        $(this).ripple();
    }
});

$("label").mouseover(function() {
    var check = $('#' + $(this).attr("for"));
    if (check.prop("disabled")) {
        $(this).removeClass("legitRipple");
    }
});

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/19 07:51

    サンプルを確認させていただいたら希望通りの機能でした。本当にありがとうございました。
    「修正後」コードを拝見してから気づきましたが、labelタグに付いたクラス名.buttonsでは、input(チェックボックス)の状態は判定できないですね。なんとも間抜けなコードを書いておりました。

    labelタグがあればlabelタグのid属性値を取得してdisabledの判定に使用し、labelタグhover時にdisabledであれば、リップルエフェクトを適用するクラス名を削除する、ということでしょうか。
    なにはともあれ重ねてになりますが、ありがとうございました。

    キャンセル

  • 2019/09/19 09:51

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

    キャンセル

+1

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

<span class="buttonBox">
    <button class="buttons" id="dessert">デザート</button>
</span>
$(".buttonBox").click(function () {
    if ($(this).children(".buttons:first").prop("disabled")) {
        alert("disabled");
    };
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/18 13:23 編集

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

    キャンセル

  • 2019/09/18 15:08

    違うプラグインの情報を見てしまっていたようです、混乱させてしまい申し訳ございません。

    今開発の環境が動かせずおそらくになってしまうのですが、
    .ripple()は「エフェクトを動かす」のではなく「クリックされたときにエフェクトが動くように要素に設定する」メソッドなのではないでしょうか?
    jQueryだとdraggableなどもそのようになっていたと思いますので。

    1回目のクリックで動かないのは、1回目のクリックイベントで.ripple()が呼ばれそこでエフェクトが設定されているからかもしれません

    キャンセル

  • 2019/09/19 08:06

    プラグイン情報を記載しなかったためにお手間を掛けさせてしまい申しわありませんでした。

    先のコメントでお知らせしたプラグインは専用のjsファイルとcssファイルをインストールする必要があるため、クリックした際にcssが設定されたクラス名を付与する形式かと思われます。
    そのため1回目のクリックでクラス名が付与され、2回目のクリックでリップルエフェクト適用される、という流れかもしれません。

    とはいえプラグインのデモでは1回目のクリックからリップルエフェクトが適用されますし、上記の仕様だとプラグインとして問題ありなのでリリースするとは考えにくいので、私の使い方が間違っている可能性が高いです。なのでプラグインの使い方を改めて読みます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る