Boostrap按钮组，在打印上隐藏不活动的按钮

Question

任何人都可以在这里向我指出正确的方向。打印页面

时，我只需要显示活动按钮

#myButtons label:not([.active]) {
    display: none;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form id="test" method="post">
  <div id="myButtons" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked value="one"> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option2" autocomplete="off" value="two"> Radio 2
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option3" autocomplete="off" value="three"> Radio 3
    </label

Answer 1

您可以使用某些CSS规则，例如：

#myButtons label:not(.active) {
    display: none;
}

，然后添加@Media打印规则以仅在打印时应用

@media print {
    #myButtons label:not(.active) {
        display: none;
    }
}

文档：

不是选择器CSS3

Answer 2

现在我没有我的设备，但是下面提到的代码将帮助您Surly ...

<script>
 $(document).ready(function(){   
    if(($("label").hasClass("active"))){
       $('.btn-primary').hide();
       $('.active').show();
    }
});
</script>

Answer 3

请使用以下代码

 $("label").click(function () {
        $("label.active").removeClass("active");
        $(this).addClass("active");
    });