Question

我想找到一种关于如何以下列方式链接bootstrap按钮类的方法？

 <!-- HTML -->
        <div class="col-md-6 col-sm-6">
            <label class="btn btn-primary">
                <input type="checkbox">
                    <i class="flaticon-groceries"></i>
                    <span>Grocery</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6">
            <label class="btn btn-primary">
                <input type="checkbox">
                    <i class="flaticon-cooking"></i>
                    <span>Cooking</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6">
            <label class="">
                <input type="checkbox">
                    <i class="flaticon-house-cleaning"></i>
                    <span>Cleaning</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6>
            <label class="">
                <input type="checkbox" ng-model="mySelfHandyman" >
                    <i class="flaticon-handyman-1"></i>
                    <span>Handyman</span>
                    <a>select</a>
            </label>
        </div>


 <!-- jquery -->
$('input[type="checkbox"]).on('change',function(){
$('input[type="checkbox"]').not(this).prop('checked', false);
});

使用输入作为无线电类型不是一种选择。他们必须是复选框。期望的结果是当checkbox = true时，按钮（在这种情况下为标签）应该是活动的，当我们选择不同的复选框时，前一个按钮应该达到其默认状态，并且当前按钮应该是活动的。情况也要求一次只选择1个复选框。 jquery已经到位解决了这个问题，但是我无法在复选框点击时切换默认和活动状态之间的按钮。目前，我必须单击两次按钮才能删除活动类。首先单击使复选框= true，按钮类=激活，如果我单击第二个复选框，它使前一个checkbox = false和（this）= true，但它也使当前按钮class = active而不将前一个按钮的类更改为默认。我真的很感激这方面的任何帮助。感谢

Answer 1

处理独占状态的方法是使对象的所有状态（例如关闭）和然后返回将活动状态更改为其唯一状态（例如，打开）。因此，使用jQuery选择器:checkbox可以让您的生活更轻松，this可以在实际点击的复选框/按钮中进行过滤。

另外，我稍微改变了HTML。当Bootstrap正确完成时，它遵循模式。

.container ~~~▼

~~~~~~~~~~~ .row ~~~▼

~~~~~~~~~~~~~~ .col-md-6 {~~~~~~~ {1}}

.col-md-6的孩子必须加起来x = 12，（例如row）

段

.col-lg-4, .col-lg-4, .col-lg-4

$(':checkbox').on('change', function() {
  $(':checkbox').prop('checked', false);
  $(this).prop('checked', true);
});

如何将引导按钮与输入复选框链接？

1 个答案:

段