非活性にした要素の色をグレーにしたくない

Question

現在html,jqueryを使ってフロントサイドの実装をしています。

その中でボタンを非活性にする処理があります。

私はボタンタグに「disabled」を追加して非活性にしました。

そうするとグレーぽい色になってしまいます。

それをグレーぽい色にせず、そのままの色にすることはできますでしょうか？

もしわかる方がいらっしゃいましたらよろしくお願いします。

Answer 1

:disabled {
  background-color: 活性の時と同じ色;
  color: inherit もしくは活性の時と同じ色;
  cursor: not-allowed;
}

cursor はついでですが、私はいつも指定します。

Comments

[think49]

方法論としてはそうなると思うのですが、ユーザビリティ(ユーザが非活性と気がつけない)が下がりません？
ユーザが何度か入力を試行して期待通りに動作しない為、管理者にバグ報告をする人が出てくる可能性があります。

[root_jp]

僕もそう思ったので、せめてもの cursor 指定をしてみました。
disabled なものを disabled と分かる状態で表示したくない理由は分かりませんが、
質問者さんはそうしたいとおっしゃっていますね。

[think49]

なるほど、いつも指定するのはcursor でいつも非活性を隠しているわけではないんですね。
後はlabel要素やtitle属性で入力不可を指摘するぐらいでしょうか。

[k499778]

回答ありがとうございます。
:disabledで非活性のときのスタイルを指定することができるんですね。
参考にさせていただきます！
わかり易い回答ありがとうございました！

Answer 2

CSS の :disabled 擬似要素はどうでしょう。

【:disabled - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:disabled

Comments

[k499778]

回答ありがとうございます。
cssの:disabledで非活性のもののスタイルを決めることができると学ぶことができました。
参考にさせていただきます。

Answer 3

disabled/enabledの判定をする際に、

.off() | jQuery 1.9 日本語リファレンス | js STUDIO

↑disabledにしたいときにこれを使う。

.on() | jQuery 1.9 日本語リファレンス | js STUDIO

↑enabeldにしたいときにこれを使う。

ってな形ではだめでしょうか？

Comments

[k499778]

回答有り難うございます。
offにしてイベント自体を消してしまえばいいのですね。なるほど。これだとクリックイベントを走らせること自体防ぐことができるのでいい方法だと思います。
これで試してみます。
わかり易い回答ありがとうございました。

Answer 4

javascriptの書き方としてonclickなどの形でイベントを書き取っているのかそれともjqueryでリスナー拾っているのかはわかりませんが、disableにするというタイミングで起動されるjavascriptを別のものにして、

return false;

だけにしてしまえばいいのではないかと思いますが、いかがでしょうか？
jqueryだとセレクタの書き方次第で難易度は上がってしまうかと思いますが＾＾；

Comments

[k499778]

回答有り難うございます。
この方法だと色はそのままでイベントの処理を実行せずに済ませることができると思います。ありがとうございます。

Answer 5

readonly はいかがですか？
多少仕様は違うのでググってください。

Comments

[pac894398]

ボタンなら動作に影響はないと思いますが...。

[k499778]

回答ありがとうございます。

readonlyも試したのですが、
非活性にはならないので、
ボタンのクリックイベントが発火してしまうのです。
色以前に非活性にしてボタンをクリックできないようにしたいので。

[pac894398]

そうですか... 申し訳ございません。
CSSで デザインを同じにしてはいかがですか？

[k499778]

返答ありがとうございます。
いえいえ滅相もございません。回答していただけただけでありがたいです。
CSSの:disabledを使うのですね。
アドバイスありがとうございます。参考にさせていただきます。