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;
    }
}

docs：

not selector css3

Answer 2

现在我没有设备，但下面提到的代码会帮助你乖乖......

<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");
    });

Boostrap按钮组，在打印时隐藏非活动按钮

3 个答案: