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

【问题标题】：How to select checkbox name with array如何使用数组选择复选框名称
【发布时间】：2018-11-11 21:01:30
【问题描述】：

如果选中其中一个复选框，我将尝试禁用其他同名复选框。这是我的代码：

<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>

这里是 JS：

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

代码以这种方式运行良好。现在，我需要做的是我需要在下一个表单中传递每个选中的复选框，所以我需要将元素名称写为 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>

这是工作的 jsfiddle：https://jsfiddle.net/humanware/y1c330f8/4/

更新： 我尝试在 JS 中这样做：

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

但出现此错误：

【问题讨论】：

如果选中其中一个复选框，我将尝试禁用其他同名复选框。这不是单选按钮的用途吗？此外，$('input[name=sessionTime]') 不会选择任何东西，因为这不是你给他们的名字（在你的小提琴中）。阅读转义选择器中的特殊字符。最后，使用.prop() 和disabled，而不是.attr()
是的。但这是有条件的。就像，我有巨大的表格，如果一个选择框有一定的价值，那么用户应该只选择一个复选框。否则他们可以选择多个复选框。
不确定为什么要在输入名称中使用方括号。您可以改为从 $('.form-check-input') 的数组中引用每个输入的值
您最好将单选按钮重新设置为复选框，而不是尝试以编程方式实现互斥。正如@j08691 指出的那样，单选按钮内置了您想要的行为。stackoverflow.com/questions/279421/…
@Cybernetic 正如我已经提到的，如果我的大表单中的一个条件匹配，用户应该只选择一个复选框。相反，他们可以选择多个复选框。

标签： javascript jquery

【解决方案1】：

试试这个：当名称中有特殊字符时，用户用引号引起来。

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

$('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');
    }
});

JSFiddle

【讨论】：

我认为你不应该在sessionTime之后使用括号
实际上输入的名称包含括号，因此它需要用引号引起来，否则 jquery 将无法正确理解它
@BhushanKawadkar 您的解决方案运行良好。但是用这种方法好不好？