Question

我正在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>

Answer 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"可能导致您的麻烦。

单选按钮列表无法在bootstrap模式中弹出

1 个答案: