Question

我有一些复选框，当您单击禁用所有其他复选框时，直到您取消选中复选框。这很有效。但我也希望加入一个toggleClass＆＃39; active＆＃39;在标签上。

因此，当您单击标签时，它会将类添加为活动状态。但是，如果您单击另一个标签，则在您取消之前单击的标签上的类之前，它不会添加活动类。对不起，如果这听起来有点令人困惑。

我让js在这里的复选框部分工作：

$('.test').change(function(){
if($('input.test').filter(':checked').length == 1)
    $('input.test:not(:checked)').attr('disabled', 'disabled');
else
    $('input.test').removeAttr('disabled');
});

我有标签的

$('.holder label').click(function() {
    $('.holder label').not(this).removeClass('active')
    $(this).toggleClass('active')
})

但他们不知何故需要共同努力。你可以通过查看这个小提琴http://jsfiddle.net/CHQsR/327/

来获得更好的主意

e.g。如果你点击了＆＃39; Label1＆＃39;它是正确的（文本变为粗体，勾选复选框）。但是，如果你点击“Label2＆＃39;应该添加“活跃的”＃39;在取消选中＆＃39; Label1＆＃39;

之前，请选择（并加粗）

由于

Answer 1

查看固定版本：http://jsfiddle.net/maestrow/uqy77q98/3/

HTML：

<div class="holder">
    <label for="checkone">Label1</label>
    <input type="checkbox" class="test" id="checkone" />
</div>

<div class="holder">
    <label for="checktwo">Label2</label>
    <input type="checkbox" class="test" id="checktwo" />
</div>

<div class="holder">
    <label for="checkthree">Label3</label>
    <input type="checkbox" class="test" id="checkthree" />
</div>

使用Javascript：

$('.test').change(function(){
  if($('input.test').filter(':checked').length == 1)
    $('input.test:not(:checked)').attr('disabled', 'disabled');
  else
    $('input.test').removeAttr('disabled');  

  var id = $(this).attr('id');
  $('label[for='+id+']').toggleClass('active');
});

的CSS：

.active{font-weight:bold;}

实际上，您并不关心点击标签，因为它们通过for atrribute与相应的复选框相连。在复选框更改以及禁用/启用休息复选框时，您应该在相应的标签上切换类。

此外，您不应在id标记中包含哈希符号。选择器中使用的哈希，当你想要按id选择时，即：<div id="mydiv">和选择器来选择这个div #mydiv，你可以将其用作$('#mydiv')。

标签上的toggleClass，禁用直到未单击

1 个答案: