Question

以下html代码允许用户选中多个复选框。可以限制为允许用户使用jquery仅选择一个复选框。每个复选框都在div元素中。

<div class="wrapper left">
    <div class="col214 left label">
       Current Treatment<em>*</em>  
    </div>
    <div class="col234 left">
        <div>
        <asp:CheckBox ID="chkPD" runat="server" TabIndex="3" CssClass="chkTrt" Text="PD"></asp:CheckBox>        
        </div>
        <div>
        <asp:CheckBox ID="chkHD" runat="server" TabIndex="4" CssClass="chkTrt" Text="HD"></asp:CheckBox>        
        </div>
        <div>
        <asp:CheckBox ID="chkConservative" runat="server" TabIndex="5" CssClass="chkTrt" Text="Conservative"></asp:CheckBox>        
        </div>
        <div>
        <asp:CheckBox ID="chkTransplant" runat="server" TabIndex="6" CssClass="chkTrt" Text="Transplant"></asp:CheckBox>        
        </div>
        <div class="divChkOther">
        <asp:CheckBox ID="chkOther" runat="server" TabIndex="7" CssClass="chkTrt" Text="Other"></asp:CheckBox>        
        </div>
        <div id="divOther" style="display: none;">
            <div class="wrapper left">
                <div class="col216 left">
                    Please specify:
                </div>
                <div class="col256 left">
                    <asp:TextBox runat="server" ID="tbOther" MaxLength="200" CssClass="tb" TabIndex="8"></asp:TextBox>
                </div>
            </div>
        </div>
        <div>
        <asp:Label runat="server" ID="lblCurrentTreatment" CssClass="lbl" Style="display: none;"></asp:Label>
        </div>
        <div>
        <asp:Label runat="server" ID="lblCurrentTreatmentOtherDesc" CssClass="lbl" Style="display: none;"></asp:Label>
        </div>
    </div>
</div>

Answer 1

尝试此操作：您可以在单击任意一个复选框时取消选中所有其他复选框。

＆＃13;

$(function(){
       $('div.col234.left .chkTrt').on('click',function(){
          $('div.col234.left .chkTrt').not(this).prop('checked',false);
       });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col234 left">
        <div>
        <input type="checkbox" ID="chkPD" TabIndex="3" class="chkTrt" value="PD">       
        </div>
        <div>
        <input type="checkbox" ID="chkHD" TabIndex="4" class="chkTrt" value="HD">      
        </div>
        <div>
        <input type="checkbox" ID="chkConservative"  TabIndex="5" class="chkTrt" value="Conservative">        
        </div>
        <div>
        <input type="checkbox" ID="chkTransplant" TabIndex="6" class="chkTrt" value="Transplant">        
        </div>
        <div class="divChkOther">
        <input type="checkbox" ID="chkOther" TabIndex="7" class="chkTrt" value="Other">       
        </div>
</div>

＆＃13;

但最好的选择是使用单选按钮而不是米兰切达建议的复选框

Answer 2

只需创建一个单选按钮而不是复选框，但如果在您的情况下您真的需要使用复选框，那么您必须使用javascript

Public Sub RunMyCode

    MsgBox "This is my macro to run!"

End Sub

如何限制用户只选择一个复选框

2 个答案: