Javascript 如何使用数组选择复选框名称

Javascript 如何使用数组选择复选框名称,javascript,jquery,Javascript,Jquery,如果选中其中一个复选框,我将尝试禁用其他同名复选框。这是我的密码: <div id="selectSessionEvening" class="sessionEvening"> <p style="font-weight:bold;">Evening Session</p> <div class="form-check"> <input class="form-check-input" type="checkb

如果选中其中一个复选框,我将尝试禁用其他同名复选框。这是我的密码:

<div id="selectSessionEvening" class="sessionEvening">
    <p style="font-weight:bold;">Evening Session</p>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="4:00 PM - 5:00 PM" id="four-five" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="four-five">4:00 PM - 5:00 PM</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="5:00 PM - 6:00 PM" id="five-six" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="five-six">5:00 PM - 6:00 PM</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="6:00 PM - 7:00 PM" id="six-seven" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="six-seven">6:00 PM - 7:00 PM</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="7:00 PM - 8:00 PM" id="seven-eight" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime">
        <label class="form-check-label" for="seven-eight">7:00 PM - 8:00 PM</label>
    </div>
</div>
代码以这种方式运行良好。 现在,我需要做的是,我需要在下一个表单中通过每个复选框,因此我需要将元素名称写为selectTime[],完成此操作后,我的JS现在无法工作。我一直在寻找解决方案,但无法为我工作。你有什么解决办法吗

以下是更新的代码:

<div id="selectSessionEvening" class="sessionEvening">
                      <p style="font-weight:bold;">Evening Session</p>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="4:00 PM - 5:00 PM" id="four-five" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="four-five">4:00 PM - 5:00 PM</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="5:00 PM - 6:00 PM" id="five-six" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="five-six">5:00 PM - 6:00 PM</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="6:00 PM - 7:00 PM" id="six-seven" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="six-seven">6:00 PM - 7:00 PM</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="7:00 PM - 8:00 PM" id="seven-eight" onFocus="startCalc();" onBlur="stopCalc();" name="sessionTime[]">
                        <label class="form-check-label" for="seven-eight">7:00 PM - 8:00 PM</label>
                      </div>
                    </div>
但我犯了这个错误: 试试这个: 当名称中有特殊字符时,用户在名称周围加引号

我在这里修改了你的代码-使用这个

$('input[name="sessionTime[]"]').change(function(){
  var checked = $(this).is(':checked');
    if(checked){
        $('input[name="sessionTime[]"]').not(this).prop('disabled',checked);
    } else {
        $('input[name="sessionTime[]"]').prop('disabled', checked);
        console.log('not disabled');
    }
});
试试这个: 当名称中有特殊字符时,用户在名称周围加引号

我在这里修改了你的代码-使用这个

$('input[name="sessionTime[]"]').change(function(){
  var checked = $(this).is(':checked');
    if(checked){
        $('input[name="sessionTime[]"]').not(this).prop('disabled',checked);
    } else {
        $('input[name="sessionTime[]"]').prop('disabled', checked);
        console.log('not disabled');
    }
});

如果选中了一个复选框,我将尝试禁用其他同名复选框。这不是单选按钮的用途吗?另外,
$('input[name=sessionTime]')
不会选择任何内容,因为这不是您(在小提琴中)给他们的名称。阅读选择器中的转义特殊字符。最后,在禁用
的情况下使用
.prop()
,而不是
.attr()
是。但这是有条件的。比如,我有一个巨大的表单,若一个selectbox有一定的值,那个么用户应该只选择一个复选框。否则,他们可以选择多个复选框。不确定为什么要在输入名称中使用括号。您可以从
$('.form check input')数组中引用每个输入的值。
您最好将单选按钮重新列为复选框,而不是尝试通过编程实现互斥性。正如@j08691所指出的,单选按钮具有内置的所需行为@正如我已经提到的,如果其中一个条件与我的大表单匹配,用户应该只选择一个复选框。相反,他们可以选择多个复选框。如果选中其中一个复选框,我将尝试禁用其他同名复选框。这不是单选按钮的用途吗?另外,
$('input[name=sessionTime]')
不会选择任何内容,因为这不是您(在小提琴中)给他们的名称。阅读选择器中的转义特殊字符。最后,在禁用
的情况下使用
.prop()
,而不是
.attr()
是。但这是有条件的。比如,我有一个巨大的表单,若一个selectbox有一定的值,那个么用户应该只选择一个复选框。否则,他们可以选择多个复选框。不确定为什么要在输入名称中使用括号。您可以从
$('.form check input')数组中引用每个输入的值。
您最好将单选按钮重新列为复选框,而不是尝试通过编程实现互斥性。正如@j08691所指出的,单选按钮具有内置的所需行为@正如我已经提到的,如果其中一个条件与我的大表单匹配,用户应该只选择一个复选框。相反,他们可以选择多个复选框。我认为您不应该在
sessionTime
之后使用括号,实际上输入的名称包含括号,因此它需要在引号中,否则jquery将不会取消它properly@BhushanKawadkar你的解决方案很有效。但使用这种方法好吗?我不认为您应该在
sessionTime
之后使用括号,实际上输入的名称包含括号,因此需要用引号括起来,否则jquery将无法理解它properly@BhushanKawadkar你的解决方案很有效。但使用这种方法好吗?
$('input[name="sessionTime[]"]').change(function(){
  var checked = $(this).is(':checked');
    if(checked){
        $('input[name="sessionTime[]"]').not(this).prop('disabled',checked);
    } else {
        $('input[name="sessionTime[]"]').prop('disabled', checked);
        console.log('not disabled');
    }
});