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

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

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

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

Q&A

解決済

[Javascript] チェックボックスのオンオフによって表示を切り替えたい

DaisukeMori
DaisukeMori

総合スコア207

JavaScript

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

2回答

0グッド

0クリップ

245閲覧

投稿2022/10/28 02:20

編集2022/10/28 02:24

実現したいこと

左側のチェックボックスをオンオフした時、右側のチェックボックスのdisableとラベルのopacity表示を切り替えたい

実現できてること

右側のチェックボックスのdisableの切り替えはうまくいってる

発生している問題

ラベルのopacity表示は一度目はopacityが変わってくれるが
左側のチェックボックスを再度クリックしてチェックを外しても
opacity表示は切り替わらない。

詳細は添付画像

イメージ説明

該当のソースコード

html

1 <form action=""> 2 <label for="discount" class="top_search-discount"> 3 <input type="checkbox" id="discount" name="discount" value="割引あり" /> 4 <span>割引特典あり</span> 5 </label> 6 7 <label for="utilization-time" class="top_search-discount top_search-discount-right"> 8 <input type="checkbox" id="utilization-time" name="utilization-time" value="" /> 9 <span id="utilization-label">今スグ使える!</span> 10 </label> 11 </form>

javascript

1 const discount = document.getElementById('discount'); 2 3 // 初期表示 4 document.getElementById('utilization-time').disabled = true; // #utilization-time チェックをさせない 5 document.getElementById('utilization-label').style.opacity = '0.5'; // #utilization-label opacityかける 6 7 // #discountがクリックされたらconnectText関数発火 8 discount.addEventListener('click', function(){ 9 this.classList.click(connectText('utilization-time',this.checked)); 10 }); 11 12 // connectText関数 13 function connectText( textid, ischecked ) { 14 document.getElementById(textid).disabled = !ischecked; // #utilization-time チェックボックス切り替え 15 document.getElementById('utilization-label').style.opacity = '1'; // #utilization-label opacity変更 16 }

試したこと

ここをclickからtoggleにしても変わらなかった。

javascript

1 discount.addEventListener('click', function(){ 2 // this.classList.click(connectText('utilization-time',this.checked)); 3 this.classList.toggle(connectText('utilization-time',this.checked)); 4 });

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答2

0

三項演算子を使ってこうするとか:

diff

1- document.getElementById('utilization-label').style.opacity = '1'; 2+ document.getElementById('utilization-label').style.opacity = ischecked ? '1' : '0.5';

投稿2022/10/28 03:40

退会済みユーザー

退会済みユーザー

総合スコア0

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

DaisukeMori

2022/10/28 03:48

ありがとうございます。確かに三項演算子を使えばよかったんですね。
DaisukeMori

2022/10/28 03:51

具体的なコードありがとうございます。 無事再現することが出来ました。 ただこのコメントの先に、考え方の肝に部分を指し示してくれた方がいますので そちらの回答をベストアンサーとさせていただきました。

0

ベストアンサー

js

1document.getElementById(textid).disabled = !ischecked; // #utilization-time チェックボックス切り替え 2document.getElementById('utilization-label').style.opacity = '1'; // #utilization-label opacity変更

チェックボックスの有効無効を ischecked で切り替えているように、ラベルの opacity の値も ischecked で切り替えるといいと思います。

投稿2022/10/28 03:21

int32_t

総合スコア17265

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

DaisukeMori

2022/10/28 03:47

ありがとうございます。
DaisukeMori

2022/10/28 03:50

考え方ありがとうございました。 上の方は具体的なコードを示してくれたのですが、 こちらの回答の方が考え方の肝を示してくれたのでベストアンサーとさせていただきます。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

JavaScript

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