如果一个禁用行存在jQuery如何启用所有行

时间:2017-04-04 03:53:18

标签: javascript jquery html

如果存在一个禁用的行,如何启用所有行。我桌子里面有两种按钮。第一个按钮,当您单击它时,它会启用所有禁用的按钮。单击第二个按钮时,它会启用/禁用分配给它的特定行。

HTML

<tr class="${fn:substring(monthInfo.month, 0, 3)}">
  <c:if test="${stat.first}">
    <td class="monthName" rowspan="6" value="${fn:substring(monthInfo.month, 0, 3)}">
      <div class="vertical-text">
        ${fn:substring(monthInfo.month, 0, 3)}<br>
        <img src="resources/images/edit.png" width="20%" href="#" />
      </div>
    </td>
  </c:if>
  <td><img class="editButt" src="resources/images/edit.png" href="#" /></td>
  <td>${weekInfo.weekStart}</td>
  <td>${weekInfo.weekEnd}</td>
  <c:forEach items="${weekInfo.weeklyData}" var="week">
    <td><input type="text" name="cell" class="hours" maxlength="2" value="${week}"></td>
  </c:forEach>
  <td class="weekTotal ibm-bgcolor-green-10 ">${weekInfo.totalHrs}</td>
  <td class="holidayTotal">${weekInfo.totalHo}</td>
  <td class="vacationTotal">${weekInfo.totalVl}</td>
  <td class="sickTotal">${weekInfo.totalSl}</td>
  <td><input type="text" name="cell" class="remarks" value="${weekInfo.remarks}"></td>
</tr>

的jQuery

$('.editButt').click(function() {
  $(this).closest('tr').find('input:text').prop('disabled', function(i, v) {
    return !v;
  });
});

$('.monthName').click(function() {
  $("#test1table tbody tr").each(function() {
    var className = $(this).closest('tr').find('td:first').text().trim();
    var value = $('.' + className).find('input:text').is(':disabled');
    if (!value) {
      disableRows();
    } else {
      $('.' + className).find('input:text').prop('disabled', function(i, v) {
        return !v;
      });
    }
  });
});

这里发生的是如果启用了2行。当我单击第一个按钮(.monthName)时。启用的2行将被禁用,禁用的行将启用。

但我想要的是当我点击第一个按钮时。无论有哪个属性,都会启用所有行。

1 个答案:

答案 0 :(得分:0)

  

但我想要的是当我点击第一个按钮时。无论有哪个属性,都会启用所有行。

启用所有按钮

$("#enable-all").click(function(e) {
  $("table").removeClass("disabled");
  $("tbody tr").removeClass("danger");
  $("table input, table button").prop("disabled", false);
});

停用所有按钮

$("#disable-all").click(function(e) {
  $("table").addClass("disabled");
  $("tbody tr").addClass("danger");
  $("table input, table button").prop("disabled", true);
});

切换按钮

$("#toggle").click(function(e) {

  $("table").toggleClass("disabled");
  $("tbody tr").toggleClass("danger");
  var isDisabled = $("table").hasClass("disabled");

  if (isDisabled) {
    $("table input, table button").prop("disabled", true);
  } else {
    $("table input, table button").prop("disabled", false);
  }

});

jsfiddle

相关问题