HTML 输入类型单选按钮未在页面加载时显示选择

Question

我一直在尝试根据页面加载时数据库中的值来选择正确的输入类型单选按钮。它应该显示选定的相应按钮，例如。如果文件类型为“分隔”，则应选择分隔按钮。我已经验证了它背后的代码可以正常工作。我还检查了显示checked="checked"的页面源，但按钮仍然没有明显地显示为被选中。我用普通的 asp.RadioButton 试过了，效果很好，为什么在这里不起作用？ 后面的代码运行在 OnInit 方法中。

HTML

<div class="form__group">
    <asp:label class="form__label" id="switchLabel_FileType" runat="server">File Type</asp:label>
    <div id="FileType" class="btn-group" data-toggle="buttons" style="width:100%">
            <label class="btn btn-primary btn-small active" style="width:33.3%" >
                <input type="radio" name="options" id="label_Delimited" autocomplete="off" runat="server" style="width:33%" /> Delimited
            </label>

            <label class="btn btn-primary btn-small active" style="width:33.3%" >
                <input type="radio" name="options" id="label_Excel" autocomplete="off" runat="server" style="width:33%"/> Excel
            </label>
            <label class="btn btn-primary btn-small active" style="width:33.3%">
                <input type="radio" name="options" id="label_FixedWidth" autocomplete="off" runat="server" style="width:33%"/> Fixed Width
            </label>
    </div> 
</div>

C#

            string fType = row[Constants.FILE_TYPE].ToString();
            if (fType == Constants.FILETYPE_DELIMITED)
            {
                label_Delimited.Checked = true;
            }

            else if (fType == Constants.FILETYPE_XLS)
            {
                label_Excel.Checked = true;
            }

            else if (fType == Constants.FILETYPE_FIXEDWIDTH)
            {
                label_FixedWidth.Checked = true;
            }

Answer 1

由于data-toggle="buttons" 复选框的工作方式是这样，您必须添加活动类以激活该按钮

<asp:label class="form__label" id="switchLabel_FileType" runat="server">File Type</asp:label>
<div id="FileType" class="btn-group" data-toggle="buttons" style="width:100%">
            <asp:label class="btn btn-primary btn-small" id="Label1"  runat="server">
                <input type="radio" name="options"    style="width:33%" /> Delimited
            </asp:label>


            <asp:label class="btn btn-primary btn-small" id="Label2"  runat="server">
            <input type="radio" name="options"   style="width:33%"/> Excel
            </asp:label>


            <asp:label class="btn btn-primary btn-small" id="Label3"  runat="server">
            <input type="radio" name="options"  style="width:33%"/> Fixed Width
            </asp:label> </div> 

在cs中你可以设置按钮

        Label1.Attributes.Add("Class", "btn btn-primary btn-small active");
        Label2.Attributes.Add("Class", "btn btn-primary btn-small");
        Label3.Attributes.Add("Class", "btn btn-primary btn-small");