选中复选框下方的复选框无法选中

Question

您好，我在解决此问题时遇到问题。我有 4 个复选框，其中一次只能检查 1 个复选框。这意味着如果当前选中了第二个框并且我勾选了第一个框，那么应该删除第二个框的选中。

我的问题是，当我勾选一个复选框时，我不能再选中它下面的其他复选框。我需要先取消选中该框，然后它才能再次起作用。

这是我的 javascript

var a = $('.8kfth').val();
        $(':checkbox').on('click', this, function(){
            if ($('.8kfirstchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8ksecondchk, .8kthirdchk, .8kfourthchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with 425');
            }
            else if ($('.8ksecondchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8kfirstchk, .8kthirdchk, .8kfourthchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with DEFA14A or DFAN14A');
            }
            else if ($('.8kthirdchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8kfirstchk, .8ksecondchk, .8kfourthchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with SC TO-C');
            }
            else if ($('.8kfourthchk').prop('checked')==true && $('.8kfth').val()=="one")
            {
                $('.8kfirstchk, .8ksecondchk, .8kthirdchk').prop('checked', false);
                $('.ft-identifier').html('').append('8-K with SC TO-C');
            }
        });

这是html

<P align=center><select class="8kfth"><option></option><option><value="one">one</option><option value="two">two</option></select></P>

<TABLE style="LINE-HEIGHT: 13pt; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width="100%" border=0>

<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox" class="8kfirstchk">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>425</FONT></TD></TR>
<TR>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"></TD></TR>
<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox" class="8ksecondchk"></FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>PANDA</FONT></TD></TR>
<TR>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"></TD></TR>
<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox"  class="8kthirdchk"></FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>SCIENCE TO SCIENCE</FONT></TD></TR>
<TR>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman">&nbsp;&nbsp;</FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"></TD></TR>
<TR vAlign=bottom>
    <TD NOWRAP WIDTH="1%" STYLE="text-align: left; vertical-align: middle"><FONT size=2 face="Times New Roman"><input type="checkbox"  class="8kfourthchk"></FONT></TD>
    <TD WIDTH="99%" STYLE="text-align: left; vertical-align: middle"><FONT face="Times New Roman" size=2>SCIENCE TO SCIENCE</FONT></TD></TR></TABLE>

如果对 https://jsfiddle.net/yguch1yb/ 有帮助，这里有一个小提琴 （请注意，您需要在下拉列表中选择一个才能解决我的问题）

Answer 1

这将允许您创建可以用数字指定的复选框组。因此，当您定义它们时，这一代码将应用于多个组。这也将简单地验证给定组中的唯一值是您选择的最后一个值。

$('input[data-checkGroup]').on('click',function(){
  let item = this;
  let group = $(this).attr('data-checkGroup');
  let checked = $('[data-checkGroup="'+group+'"]:checked');
  $.each(checked,function(k,v){
    if(v !== item) v.checked = false;
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" data-checkGroup="1"> Value 1<br/>
<input type="checkbox" data-checkGroup="1"> Value 2<br/>
<input type="checkbox" data-checkGroup="1"> Value 3<br/>
<input type="checkbox" data-checkGroup="1"> Value 4

<br/>

<span class="log"></span>