###前提・実現したいこと
現在チェックボックスをページ上に複数設置しています。
下記の設定は終えたので、見た目はラジオボタンの様な動作をしています。
1.チェックボックスの選択を1つだけにする
2.checked属性を用い、先頭の項目にあらかじめチェックを入れる
しかし、チェックされた項目をクリックするとチェックが外れてしまい、「選択なし」という状況が起こってしまいます。
これを回避するため「チェックされている項目をクリックした場合、チェックを外さない」という挙動を望んでいます。
本当にチェックが外れないソースコードがあるならばもちろん、外れても自動で再度チェックが入るのでももちろん構いません、ご存知の方がいらっしゃればご教授いただければと思います。
*補足させていただきます。
ラジオボタンの様に振る舞わせたいブロックも複数ございます。
■AAA □BBB □CCC □DDD □EEE □FFF
■GGG □HHH □III □JJJ □KKK □LLL
・
・
###該当のソースコード
<!--チェックボックスの選択を1つだけにする--> <script type="text/javascript"> $(function(){ $(":checkbox").click(function(){ var flag = $(this).prop('checked'); $(this).parent("div").find(":checkbox").prop('checked', false); $(this).parent("div").find(".checkboxView").removeClass('selected'); if(flag){ $(this).prop('checked', true); $(this).next(".checkboxView").addClass('selected'); } }); }); </script> <div> <!--先頭の項目をあらかじめチェック--> <input id="checkbox1" type="checkbox" checked/> <label for="checkbox1"><span class="checkboxView">AAA</span></label><input id="checkbox2” type="checkbox" />
<label for="checkbox2”><span class="checkboxView">BBB</span></label>
<input id="checkbox3” type="checkbox" />
<label for="checkbox3”><span class="checkboxView">CCC</span></label>
<input id="checkbox4” type="checkbox" />
<label for="checkbox"><span class="checkboxView">DDD</span></label>
<input id="checkbox5” type="checkbox" />
<label for="checkbox5”><span class="checkboxView">EEE</span></label>
<input id="checkbox6” type="checkbox"/>
<label for="checkbox6”><span class="checkboxView">FFF</span></label>
<input id="checkbox2” type="checkbox" />
<label for="checkbox2”><span class="checkboxView">HHH</span></label>
<input id="checkbox3” type="checkbox" />
<label for="checkbox3”><span class="checkboxView">III</span></label>
<input id="checkbox4” type="checkbox" />
<label for="checkbox"><span class="checkboxView">JJJ</span></label>
<input id="checkbox5” type="checkbox" />
<label for="checkbox5”><span class="checkboxView">KKK</span></label>
<input id="checkbox6” type="checkbox"/>
<label for="checkbox6”><span class="checkboxView">LLL</span></label>
###試したこと
ちなみに以下のページで似たような案件を紹介されていたのですが
http://www.trust.or.jp/Public/Blog.aspx?ArticleNo=22
そのままコピー&ペーストするとスクリプトエラーが表示され、検証できませんでした。
本来ラジオボタンを使うべきなのは理解しているのですが、諸事情によりチェックボックスでの実装を望んでいます。
回答1件
あなたの回答
tips
プレビュー