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>

这是一个live preview

但它不起作用。

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

请建议出现什么问题

Answer 1

尝试

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

代替

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

它可能有用。

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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);
    });

复选框一次检查一个不工作

2 个答案: