如果 checkbox.checked > 0 在 asp mvc 中使用 js/jquery 如何启用按钮？

Question

这是我的 html 标记

<form action="/SessionCart/AddToSession" method="post">    
<table class="table">
        <tr>
            <th>
                &nbsp;
            </th>
            <th>
                Foo
            </th>
        </tr>

            <tr>
                <td>
                    <input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[0].SessionId" type="hidden" value="1" />
                    <input data-val="true" data-val-required="The isSelected field is required." name="[0].isSelected" type="checkbox" value="true" /><input name="[0].isSelected" type="hidden" value="false" />
                </td>
                <td>
                   A
                </td>
            </tr>
            <tr>
                <td>
                    <input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[1].SessionId" type="hidden" value="8" />
                    <input data-val="true" data-val-required="The isSelected field is required." name="[1].isSelected" type="checkbox" value="true" /><input name="[1].isSelected" type="hidden" value="false" />
                </td>
                <td>
                    B
                </td>
            </tr>

    </table>
    <button id="addToCart" type="submit" class="btn btn-success">Add To Cart</button>
</form>

这是我的 javascript 启用或禁用按钮，但我想仅在至少选中一个复选框时启用？我想确保至少选中一个复选框以启用该按钮。

  <script type="text/javascript">
    if () {
        $("#addToCart").attr("disabled", "disabled");
    } else {
        $("#addToCart").removeAttr("disabled");
    }
</script>

Answer 1

您可以发现复选框已选中

$('#mytable').find('input[type="checkbox"]:checked'){
     $("#addToCart").attr("disabled", "disabled");  
 });

或更普遍

$('table [type="checkbox"]').each(function(i, chk) {
    if (chk.checked) {
       $("#addToCart").attr("disabled", "disabled");
    }
    else{
       $("#addToCart").removeAttr("disabled");
  });

Answer 2

我建议采用以下方法：

// disable the 'addToCart' <button> via jQuery
// (or plain JavaScript) to ensure that the button
// works in the (increasingly unlikely) event that
// JavaScript is disabled:
$('#addToCart').prop('disabled', true);

// select the <input> elements, whose type is equal to checkbox
// within the <table> element with a class of 'table';
// bind the anonymous function of the on() method as the
// event-handler for the 'change' event:
$('table.table input[type=checkbox]').on('change', function() {

  // here we find the number of checkboxes within the closest
  // ancestor <table> element that are checked, and see if the
  // number of checked elements is exactly equal to zero:
  let checked = $(this).closest('table').find('input[type=checkbox]:checked').length === 0;

  // we update the 'disabled' property to 'true' if the
  // number of checked checkboxes is exactly zero; and
  // to false if the number is not exactly equal to zero:
  $('#addToCart').prop('disabled', checked);
});

$('#addToCart').prop('disabled', true);
$('table.table input[type=checkbox]').on('change', function() {
  let checked = $(this).closest('table').find('input[type=checkbox]:checked').length === 0;

  $('#addToCart').prop('disabled', checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <th>
      &nbsp;
    </th>
    <th>
      Foo
    </th>
  </tr>

  <tr>
    <td>
      <input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[0].SessionId" type="hidden" value="1" />
      <input data-val="true" data-val-required="The isSelected field is required." name="[0].isSelected" type="checkbox" value="true" /><input name="[0].isSelected" type="hidden" value="false" />
    </td>
    <td>
      A
    </td>
  </tr>
  <tr>
    <td>
      <input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[1].SessionId" type="hidden" value="8" />
      <input data-val="true" data-val-required="The isSelected field is required." name="[1].isSelected" type="checkbox" value="true" /><input name="[1].isSelected" type="hidden" value="false" />
    </td>
    <td>
      B
    </td>
  </tr>

</table>
<button id="addToCart" type="submit" class="btn btn-success">Add To Cart</button>

如果 checkbox.checked > 0 在 asp mvc 中使用 js/jquery 如何启用按钮？

How to enable a button if checkbox.checked > 0 using js/jquery in asp mvc?

javascript

checkbox

disabled-control