0

我在引导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> 

回答

0

您使用<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"可能造成你的困扰。