たびたびお世話になっております。
先日似たような質問をし、解決したと思ったところ、特定の条件下(スマホ)で再度問題が発生したため、アドバイスを頂きたいです。
課題
スマホにて一度選択したラジオボタンを再度押下することで、選択解除をしたいのですが、選択解除が下記のコードでは選択解除ができないです。PC上では選択解除が可能です。
なおデバッグをしたところ、再度押下した際に下記jsの「$(this).prop('checked', false);」にて選択が一瞬解除されるのですが、if文終了後、選択された状態に戻ってしまう模様です。
よろしくお願い致します。
html
1<div class="checkboxTab"> 2 <ul id="grade"> 3 <li><input type="radio" name="grade" value="一年生" id="elem"><label for="elem">一年生</label></li> 4 <li><input type="radio" name="grade" value="二年生" id="junior"><label for="junior">二年生</label></li> 5 <li><input type="radio" name="grade" value="三年生" id="high"><label for="high">三年生</label></li> 6 </ul> 7</div>
js
1var nowchecked = $('input[name=grade]:checked').val(); 2$('input[name=grade]').click(function(){ 3 if($(this).val() == nowchecked) { 4 $(this).prop('checked', false); 5 nowchecked = false; 6 } else { 7 nowchecked = $(this).val(); 8 } 9});
css
1.checkboxTab { 2max-width: 900px; 3font-size: 0; 4letter-spacing: 0; 5overflow: hidden; 6} 7.checkboxTab ul { 8margin-left: -4px; 9padding-inline-start: 0px; 10} 11.checkboxTab ul li { 12float: left; 13width: 136px; 14height: 45px; 15margin: 0 4px 8px; 16display: table; 17} 18 19.checkboxTab input { 20display: none; 21-webkit-appearance: inherit; 22border: none; 23position: absolute; 24z-index: 2; 25top: 0; 26left: 0; 27background-color: #000; 28position: relative; 29width: 100%; 30height: 100%; 31} 32 33.checkboxTab input:checked + label { background-color: #000; color: #fff;} 34 35.checkboxTab label { 36display: table-cell; 37vertical-align: middle; 38font-size: 1.55rem; 39font-weight: 500; 40background-color: #e5e5e5; 41text-align: center; 42border-radius: 3px; 43color: inherit; 44line-height: 1; 45cursor: pointer; 46transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; 47} 48.checkboxTab label[for="consistency"] { 49font-size: 1.3rem; 50} 51.checkboxTab label:hover { 52background-color: #000; 53color: #fff; 54} 55.checkboxTab .mini { font-size: 1.2rem; }
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/11 02:32
2019/03/11 02:35
2019/03/11 03:54