実装したいこと
現状、タイトルにあるselectで選択肢によってボタンを活性・非活性に切り替えは実現できています。
select内のoptionにそれぞれvalueで値を1〜5まで割り当てており、
jsを使って現在はvalue="2"であれば非活性、それ以外は活性としております。
上記は条件通り実装できているのですが、値が2と4だった場合に
value="2"の箇所をvalue="2" || "4"と変更したら実現できるだろうと試してみましたが、全て非活性となってしまいます。
2と4の場合、非活性
それ以外の場合、活性
上記のように実装するには何が原因なのでしょうか・・
console.logを利用して2と4を取得できているのは確認できています。
あと一歩のところで行き詰まってしまっております。。
分かる方いらっしゃいましたらお力添えを頂きたいです。
よろしくお願い致します。
該当のソースコード
html
<body class="center"> <div class="center" style="width: 500px;"> <select name="test" id="test" onchange="check();" style="width: 50%;"> <option value="" hidden selected disabled>-</option> <option value="1">テスト①</option> <option value="2">テスト②</option> <option value="3">テスト③</option> <option value="4">テスト④</option> <option value="5">テスト⑤</option> </select> <ul class="center" style="width: 100%;"> <li> <a id="next" class="btn disable" href="#">next</a> </li> <li style="margin-top: 20px;"> <a class=" btn" href="#">back</a> </li> </ul> </div></body>
css
.btn{ list-style: none; padding: 5px 15px; border-radius: 5px; display: inline; vertical-align: middle; text-align: center; border: 1px solid #eee; color: #069; background-color: #fff;} li{ list-style: none;} a{ text-decoration: none;} .center{ display: flex; justify-content: center; align-items: center; flex-direction: column;} .disable{ cursor: default; background-color: #fff; color: #eee; border: 1px solid #eee;}
js
function check() { let checkon = true; let c_test = document.getElementById("test").value; let next = document.getElementById("next"); console.log(c_test); if (c_test === "2") { checkon = false; } else { checkon = true; } if (checkon == true) { next.className = "btn"; } else if (checkon == false) { next.className = "btn disable"; }}
0 コメント