在引导表中使用 jquery 在禁用和启用之间切换

Question

我有一个带有列表的表格，每一行都有一个复选框，当您单击该行时可以打开和关闭，我已经解决了这个问题，但我也希望在选中一个或多个复选框时启用一个按钮，和另一个仅在选中一个复选框时启用的按钮。

我无法让启用/禁用部分工作

这是我的行的 html：

<tr class="ydelse ui-draggable ui-draggable-handle" data-title="test-title">
  <td><input type="checkbox"></td>
  <td>This is a line title example</td>
</tr>

这是 html/bootstrap 中的按钮：

<div class="row">
  <div class="col-lg-2">
    <a href="#" class="btn btn-default ydelse-btn" id="sletydelse" disabled="disabled">SLET</a> 
  </div>
  <div class="col-lg-5">
    <a href="#" class="btn btn-default ydelse-btn" id="redigerydelse" disabled="disabled">REDIGER</a>                                       
  </div>
  <div class="col-lg-5 pull-right">
    <a href="#" class="btn btn-default ydelse-btn pull-right">OPRET NY</a>                                      
  </div>
</div>

这是我的 jquery：

$('table tbody tr').click(function(event) {
  if (event.target.type !== 'checkbox') {
    $(':checkbox', this).trigger('click');
  }

  if ($(':checkbox', this).prop("checked")) {
    valgte++;
  } else {
    valgte--;
  }

  console.log(valgte);

  if (valgte > 0) {
    $('#sletydelse').prop("disabled", false);
    $('#redigerydelse').prop("disabled", false);
    console.log($('#sletydelse').prop("disabled"));
  } else if (valgte > 1) {
    $('#redigerydelse').prop("disabled", true);
  }

  if (valgte == 0) {
    $('#sletydelse').prop("disabled", true);
    $('#redigerydelse').prop("disabled", true);
  }

  console.log(valgte);  
});

谁能指导我正确的方向

Answer 1

我认为你应该切换类而不是属性，因为按钮实际上是链接。

这是一种不同的方法

$('table tbody tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');
    }
    valgte = $('input[type=checkbox]:checked').length;

    $('#sletydelse, #redigerydelse').addClass("disabled")
    if (valgte > 0) {
        $('#sletydelse').removeClass("disabled");
    }
    if (valgte == 1) {
        $('#redigerydelse').removeClass("disabled");
    }
});

还有一些工作示例http://jsfiddle.net/42jevgpo/

Answer 2

$('table tbody tr').click(function(event) {
  if (event.target.type !== 'checkbox') {
    $(':checkbox', this).trigger('click');
  }

  if ($(':checkbox', this).prop("checked")) {
    valgte++;
  } else {
    valgte--;
  }
  console.log(valgte);

  if (valgte > 0) {
    $('#sletydelse').css("disabled", false);
    $('#redigerydelse').css("disabled", false);
    console.log($('#sletydelse').prop("disabled"));
  } else if (valgte > 1) {
    $('#redigerydelse').css("disabled", true);
  }

  if (valgte == 0) {
    $('#sletydelse').css("disabled", true);
    $('#redigerydelse').css("disabled", true);
  }
  console.log(valgte);  });