单选按钮列表在引导模式弹出窗口中不起作用答案

【问题标题】：Radio button list not working in bootstrap modal pop up单选按钮列表在引导模式弹出窗口中不起作用
【发布时间】：2016-08-19 13:59:29
【问题描述】：

我正在 bootstrap 3 中设计一个模式弹出窗口，它将有一个下拉列表和一个单选按钮列表，用于让用户选择他的语言偏好。但不幸的是，单选按钮列表不起作用，我的意思是当我第一次选择一个单选按钮时，它被选中，但是当我尝试选择另一个单选按钮时，它不允许我选择该单选按钮，否则取消选择选中的单选按钮.

谁能帮帮我？

这是我的代码

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;</button>
              <h4 runat="server" id="hModalHeader" class="modal-title">Hello Welcome to the Canon Professional Print Portal.</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <asp:Label ID="lblSelectCompanyLocation" runat="server" Text="Select your company's location" for="ddlSelectCompanyLocation"></asp:Label>
                    <asp:DropDownList ID="ddlSelectCompanyLocation" runat="server" CssClass="form-control">
                      <asp:ListItem>Subject 1</asp:ListItem>
                      <asp:ListItem>Subject 2</asp:ListItem>
                      <asp:ListItem>Subject 3</asp:ListItem>
                    </asp:DropDownList>
                  </div>
                  <div class="form-group" data-toggle="buttons">
                    <asp:Label ID="lblPreferedlanguage" runat="server" Text="Preferred language"></asp:Label>
                    <br />
                    <asp:RadioButtonList ID="rdLanguageList" runat="server">
                      <asp:ListItem>Item 1</asp:ListItem>
                      <asp:ListItem>Item 2</asp:ListItem>
                    </asp:RadioButtonList>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">
                Close</button>
              <button type="button" class="btn btn-primary">
                Save changes</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
    </div>
  </div>
</div>

在 Javascript 中，我在页面加载中打开模式。

<script type="text/javascript">
    $(window).load(function () {
        $('#myModal').modal('show');
    });
</script>

【问题讨论】：

您找到解决方案了吗？

标签： modal-dialog radio-button twitter-bootstrap-3 radiobuttonlist

【解决方案1】：

您使用<div class="form-group" data-toggle="buttons">。也许您打算将单选字段显示为按钮？

如果您打算有按钮，请参阅：http://getbootstrap.com/javascript/#buttons。您应该将收音机包裹在button-group 中，而不是form-group。还需要一个带有按钮类的label 标签：

<label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
</label>

在另一种情况下，data-toggle="buttons" 可能会给您带来麻烦。

【讨论】：