jQueryを使って、対象のvalue値のみのcheckboxのチェックを外したいです。

前提・実現したいこと

午前・午後・夕方・いつでも可能
を選択出来るチェックボックスを作りました。
このチェックボックスは、画面の描画に配送日ボタンを押下すると、jQueryで動的に作成されます。

いつでも可能を選択すると、午前・午後・夕方　についてるチェックを外し、
午前or午後or夕方のどれかを選ぶと　いつでも可能　にチェックが着いていた場合にそのチェックを外せるようにしたいです。
午前と午後と夕方は3つにチェックを入れることが可能です。

午前　午後　夕方　のチェックを外す処理は出来たのですが、
いつでも可能　のチェックを外す処理が出来ないです。

該当のソースコード

html
1<input type="checkbox" class="panel_checkbox" value="0" name="time">午前
2<input type="checkbox" class="panel_checkbox" value="12" name="time">午後
3<input type="checkbox" class="panel_checkbox" value="15" name="time">夕方
4<input type="checkbox" class="panel_checkbox" value="24" name="time">いつでも可能

jQuery
1$(document).on('click', 'input[name="time"]', function(){
2    if ($(this).val() == 24 ) {
3　    // 午前　午後　夕方のチェックを外す処理
4      $('input[name="time"]').prop("checked",false);
5      $(this).prop("checked",true);
6    } else {
7      // いつでも可能　のチェックを外す処理(valueの値が(24)のチェックを外す)
8    }
9});

試したこと

$('input[name="time"][name="24"]').prop("checked",true);
$('input[name="time"[name="time"=24]]').prop("checked",true);
$('input[name="time"[name="time"]'=24]).prop("checked",true);
$('input[name="time"][name="24"]').val(24).prop("checked",true);

これ以外にも色々試したのですが、3日悩んでも実現出来なかったので、どうかひとつよろしくお願いします。

m.ts10806

2020/11/07 20:27

name=24じゃなく、value=24じゃないでしょうか。 <input type="checkbox" class="panel_checkbox" value="24" name="time">

退会済みユーザー

2020/11/07 22:09

チェックボックスではなくてラジオボタンにしないのはなぜですか？

退会済みユーザー

2020/11/08 02:27 編集

>m.ts10806 言ってる事がよくわからないです。。。 nameはtimeで valueは24 です。

退会済みユーザー

2020/11/08 02:09

>SurferOnWww 午前中と午後　や　午前中と夕方などを選ぶ為です

m.ts10806

2020/11/08 05:02

ご自身で「試したこと」に書いてるようにほぼ全てでname="24"と指定しようとしていますよ。

退会済みユーザー

2020/11/09 02:05

>m.ts10806 セレクターの指定方法のページを見てたら // 指定した属性（name）の値（value）が完全一致する要素を選択します。 $("selector[name='value']") このように書いてあったので、nameで指定してました。

行動規範の内容に同意します

回答2件

ベストアンサー

下記でどうですか。

js
1$(document).on('click', 'input[name="time"]', function(){
2  if ($(this).val() == 24 ) {
3    // 午前　午後　夕方のチェックを外す処理
4    $(this).siblings(".panel_checkbox").prop("checked",false);
5  } else {
6    if ($(this).prop("checked")) {
7      $("input[value='24']").prop("checked",false)
8    } 
9  }
10});

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

投稿2020/11/08 02:13

編集2020/11/08 02:22

hatena19

総合スコア33715

退会済みユーザー

2020/11/08 02:30

こんな簡単な書き方だったとは・・・。やりたい事が実現できましたありがとうございます。ちなみに if ($(this).prop("checked")) { で囲んだのは何故ですか？

hatena19

2020/11/08 02:44

チェックを入れたときだけ動作するようにしたのですが、よく考えたら、その条件はなくても同じ動作になりますね。input[value='24']は既にFalseなのをFalseで上書きするだけですので。

行動規範の内容に同意します

valから拾ったほうがよいのでしょうか？
インデックスからだとこんな感じで

javascript
1<script>
2$(function(){
3  var s1='.panel_checkbox:eq(3)';
4  var s2='.panel_checkbox:lt(3)';
5  $(document).on('change',s1,function(){
6    $(s2).prop('checked',false);
7  }).on('change',s2,function(){
8    $(s1).prop('checked',false);
9  });
10});
11</script>
12<label><input type="checkbox" class="panel_checkbox" value="0" name="time">午前</label>
13<label><input type="checkbox" class="panel_checkbox" value="12" name="time">午後</label>
14<label><input type="checkbox" class="panel_checkbox" value="15" name="time">夕方</label>
15<label><input type="checkbox" class="panel_checkbox" value="24" name="time">いつでも可能</label>
16