复选框一次选中一个不起作用

Question

我的要求是让用户一次只能使用一个check和一个checkbox。我尝试使用以下代码：-

 $('input.chkclass').on('change', function () {
        $('input.chkclass').not(this).prop('checked', false);
    });

和HTML

<table id="trchkOptions" style='display: none' runat="server">
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <span style="display: inline-block; width: 5%;">
                        <input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
                    Option 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;
                    RA 1,&nbsp; RA 2,&nbsp; CC
                </td>
                <td style="width: 5%">
                </td>
            </tr>
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <span style="display: inline-block; width: 7%;">
                        <input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>Option
                    2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To
                    Hemant Shah, Vimal Shah, Rushank Shah, CC
                </td>
                <td style="width: 5%">
                </td>
            </tr>
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <span style="display: inline-block; width: 5%;">
                        <input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
                    Option 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To,
                    RA 1,&nbsp; RA 2,&nbsp; CC
                </td>
                <td style="width: 5%">
                </td>
            </tr>
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
                </td>
            </tr>
        </table>

这是的实时预览

但它不起作用。

注意我不想在这里使用radiobutton。我只想要checkbox。

请建议出了什么问题

Answer 1

尝试

$('input.chkclass').not(this).attr('checked', false);

而是

$('input.chkclass').not(this).prop('checked', false);

它可能会起作用。

---

演示：

$('input.chkclass').on('change', function() {
  $('input.chkclass').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="trchkOptions" style='display: block' runat="server">
  <tr>
    <td style="width: 5%">
    </td>
    <td>
      <span style="display: inline-block; width: 5%;">
                        <input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
    </td>
    <td style="width: 5%">
    </td>
  </tr>
  <tr>
    <td style="width: 5%">
    </td>
    <td>
      <span style="display: inline-block; width: 7%;">
                        <input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>
    </td>
    <td style="width: 5%">
    </td>
  </tr>
  <tr>
    <td style="width: 5%">
    </td>
    <td>
      <span style="display: inline-block; width: 5%;">
                        <input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
    </td>
    <td style="width: 5%">
    </td>
  </tr>
  <tr>
    <td style="width: 5%">
    </td>
    <td>
      <asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
    </td>
  </tr>
</table>

Answer 2

这样做。。

• 在一个复选框中取消选中其他复选框

• 在一次检查时禁用其他复选框

  1.
     $('input.chkclass').on('change', function () {
          $('input.chkclass').prop('checked', false);
          $(this).prop('checked', ture);
      });
  2.
      $('input.chkclass').on('change', function () {
           $('input.chkclass').prop('checked', false);
           $('input.chkclass').prop('disabled',true);
           $(this).prop('disabled',false);
           $(this)..prop('checked', true);
      });