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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

8107閲覧

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

MajinBoo

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2019/09/17 23:38

編集2019/09/18 02:05

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状態のボタンにイベントを組み込ませているわけではない、という認識なのですが、みなさまがご回答いただきました意味と同義なのでしょうか。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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

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

投稿2019/09/17 23:48

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MajinBoo

2019/09/18 02:14

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

0

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

0

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

0

ベストアンサー

こんにちは

ご質問に追記されている、サンプル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 をコピーして、上記の修正をしたものです。

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

「ボタン群にリップルエフェクト施し、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タグがあれば・・・ ということでしょうか。 はい。そんな感じです。 回答に書いたコードは、かなり対症療法になっている気もしますが、ひとまず > 希望通りの機能でした。 とのことでよかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問