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

时间:2015-12-14 10:55:10

标签: jquery css html5

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

我无法启用/禁用启用/停用部件

这是我的行的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);  
});

任何人都可以指导我朝正确的方向发展

2 个答案:

答案 0 :(得分:0)

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

这是一种不同的方法

$('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/

答案 1 :(得分:-1)

$('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);  });