twitter-bootstrap - 引导组按钮仍显示单选按钮

Question

我正在尝试使用 btn 组，但单选按钮仍然显示是否存在禁用它。

<div class="btn-group type-select pull-left top-buffer add-on" data-toggle="buttons">
  <label class="btn btn-primary">
     <input type="radio" name="Selection" value="Poi">
     <i class="fa fa-car fa-lg"></i>
   </label>
   <label class="btn btn-primary">
      <input type="radio" name="Selection" value="Vessel">
      <i class="fa fa-motorcycle fa-lg"></i>
   </label>
      <label class="btn btn-primary">
      <input type="radio" name="Selection" value="Intel">
       <i class="fa fa-truck fa-lg"></i>
   </label>
   <label class="btn btn-primary">
   <input type="radio" name="Selection" value="Location">
<i class="fa fa-truck fa-lg"></i>
   </label>
</div>

这是我的测试。

https://www.codeply.com/p/WYm7W2iprl

还有如何使按钮成为正常的按钮大小。我仍然想要图像而不是单选按钮，但请记住这需要能够使用 Asp.net mvc 进行选择

标签： twitter-bootstrapasp.net-core

Answer 1

根据您的描述，我想您想隐藏单选按钮，但仍想选择图标。如果是这种情况，您可以尝试使用 CSS“display:none”属性隐藏单选按钮，然后在单击图标时使用 JQuery 选中/取消选中单选按钮。请参考以下示例代码（或链接）：

<script>
    $(function () {
        $(".btn-group > .btn").each(function (index, item) {
            $(item).click(function () {
                $(".btn-group input[type = 'radio']:checked").prop('checked', false);
                $(this).find("input[type='radio']").prop("checked", true);

                //alert the checked radiobutton value.
                alert($(".btn-group input[type = 'radio']:checked").val());
            });
        });
    });
</script>
<div class="btn-group type-select pull-left top-buffer add-on" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="Selection" value="Poi" style="display:none">
        <i class="fa fa-car fa-lg"></i>
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="Selection" value="Vessel" style="display:none">
        <i class="fa fa-motorcycle fa-lg"></i>
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="Selection" value="Intel" style="display:none">
        <i class="fa fa-truck fa-lg"></i>
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="Selection" value="Location" style="display:none">
        <i class="fa fa-truck fa-lg"></i>
    </label>
</div>

然后，输出如下：

此外，要增加相对于其容器的图标大小，请使用 fa-lg（增加 33%）、fa-2x、fa-3x、fa-4x 或 fa-5x 类。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

更多详细信息，您可以查看此链接。