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>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時はリップルエフェクトを適用しない」という機能にしたいです。
下記サンプルは冒頭のサンプルのボタンにリップルエフェクトを施したものです。
アラートは削除しました。
ただし上記サンプルのJavaScriptの最後に下記のコードを記述したのですが、機能しませんでした。
$(".buttons").click(function () {
if (!$(this).prop("disabled")) { // 押したボタンがdisabledでなければ発火
$(".buttons").ripple(); // .ripple()メソッドで指定したセレクタにリップルエフェクト適用
};
});
上記コードはdisabled状態のボタンにイベントを組み込ませているわけではない、という認識なのですが、みなさまがご回答いただきました意味と同義なのでしょうか。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+4
disabled状態のチェックボックスを押した場合、アラートでdisabledを表示したいです。
disabledのボタンは、押してもイベントが発生しません。押した時に何かを起こさせたい場合、disabledをかけてはいけません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
<input> のエレメントに disabled の属性が設定されている場合、当該エレメントは「not mutable」（変化できない）であると規定されています。
そして not mutable であるエレメントは、入力を受け付けてはいけないのです。従ってイベントも発生しません。
つまり、onClick なり何なりで disable 状態のエレメントをクリックした、というのを取ることはできないのです。
どうしてもというなら window 全体の onclick イベントで、クリックした座標からエレメントを特定して、そのエレメントの属性見るとかはできますが……
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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 をコピーして、上記の修正をしたものです。
- 修正後 JS Bin: https://jsbin.com/yaguwes/edit?js,output
上記の修正によって、「肉」と「野菜」については、ご質問にある
「ボタン群にリップルエフェクト施し、disabled時はリップルエフェクトを適用しない」という機能にしたいです。
との要件が満たされていると思います。（「肉」と「野菜」以外のボタンについても同様にする場合、さらにもう少し手直しが必要かもしれません。）
以上、参考になれば幸いです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+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");
};
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.23%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/09/18 11:14