Question

我有一些复选框，只要选中其中一个复选框，就应该启用提交按钮。

但是，我没有正确使用Javascript函数。

一开始，“提交”按钮始终处于禁用状态，当我在复选框上打勾时，它一直处于启用状态，并且一直保持启用状态。

这是我的代码：

<td><input  type="checkbox" name="searchValues" th:value="${user.id}" th:checked="${user.isActive}" th:onclick="${'inputClick('''+ itemStat.index +''')'}" /></td>

JavaScript函数

<script>    
    $(function(){
        $("input[type='checkBox']").change(function(){
            $("input[type='submit']").prop("disabled", false);
        });
    });
</script>

提交按钮

<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>

可能是在加载网站时，某些复选框已被选中，因此提交按钮也应启用。仅当未勾选任何内容时，才应禁用“提交”按钮。

也许有人知道我在这里想念什么？

Answer 1

您需要在$(this).is(':checked')函数中使用prop()来实际检查复选框是否已选中/未选中。

在您的情况下，您需要使用!$(this).is(':checked')，以便在选中复选框时启用提交按钮，反之亦然。

$(function() {
  $("input[type='checkBox']").change(function() {
    $("input[type='submit']").prop("disabled", !$(this).is(':checked'));
  });
  //for initial case
  $("input[type='checkBox']").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" name="searchValues" th:value="${user.id}" th:checked="${user.isActive}" th:onclick="${'inputClick('''+ itemStat.index +''')'}" checked/></td>
  </tr>
</table>
<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>

Answer 2

您可以检查所有选中的复选框的长度。如果长度为0，则可以将 disabled 属性设置为 true ，否则删除该属性。您可以触发change事件来设置页面加载时的button属性。

$(function(){
  $("input[type='checkBox']").change(function(){
    var len = $("input[type='checkBox']:checked").length;
    if(len == 0)
      $("input[type='submit']").prop("disabled", true);
    else
      $("input[type='submit']").removeAttr("disabled");
  });
  $("input[type='checkBox']").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input  type="checkbox" name="searchValues" checked /></td>
    <td><input  type="checkbox" name="searchValues" /></td>
    <td><input  type="checkbox" name="searchValues" /></td>
  </tr>
</table>


<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>

Answer 3

使用香草Javascript，即可完成此工作：

// get a list of the checkboxes and spread it into an array
// so later you can use Array methods on it
const checkboxes = [...document.querySelectorAll('input[type=checkbox]')]

// function that tells you if any checkboxes in
// the above list are checked
function anyChecked() {
  // this is where we're using an array method
  // Array.prototype.some
  return checkboxes.some(x=>x.checked)
}

// to every single checkbox, add a click listener
// again, using an Array method
// Array.prototype.forEach
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', () => {
    // when any checkbox is clicked,
    // check if there's any checked checkboxes
    anyChecked()
      // if so, enable the button
      ? submitbtn.removeAttribute('disabled')
      // otherwise, disable it
      : submitbtn.setAttribute('disabled','')
  })
})

// do the same thing initially as well 
// to account for initially checked checkboxes
anyChecked()
      ? submitbtn.removeAttribute('disabled')
      : submitbtn.setAttribute('disabled','')

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" />
<button type="submit" id="submitbtn">Submit</button>

如果未选中任何复选框，请禁用提交按钮

3 个答案: