jquery 复选框和文本框验证

Question

我有这个提交按钮，只有当用户在所有文本字段中输入一个词并从我的复选框中至少选择一个时，它才会启用。所以这是我的代码：

$(document).ready(function() {
    $('#btnAddUser').attr('disabled', true);

    var checkboxes = $("input[type='checkbox']");
    $('#txtName' && '#txtLastname').on("keyup", action);

    function action() {
        if ($('#txtName' && '#txtLastname').val().length > 0) {
            $('#btnAddUser').attr("disabled", false);
        } else {
            $('#btnAddUser').attr("disabled", true);
        }
    }

    var checkboxes = $("input[type='checkbox']"),
        submitButt = $("#btnAddUser");

    checkboxes.click(function() {
        if ($(this).is(':checked')) {
            $('#btnAddUser').prop("disabled", false);
        } else {
            $('#btnAddUser').prop("disabled", true);
        }
    });
});

我的文本框和复选框功能目前是分开的，我如何将它们合并到一个函数中，这样如果用户没有在文本框中输入单词并选择任何一个，它就不会启用提交按钮可用的复选框。谢谢！我真的需要尽快完成这件事。

Answer 1

我创建了 2 个属性，disabled1 和 disabled2。第一个包含文本字段的验证，第二个包含复选框的验证。

如果两次验证都成功，则按钮将被启用，否则将被禁用。

代码

$(document).ready(function() {
    var disabled1 = true;
    var disabled2 = true;

    var checkboxes = $("input[type='checkbox']");
    $('#txtName' && '#txtLastname').on("keyup", function() {
        if ($('#txtName' && '#txtLastname').val().length > 0) {
            disabled1 = false;
        } else {
            disabled1 = true;
        }
        loadButton();
    });

    $("input[type='checkbox']").click(function() {
        // Check if at least one checkbox is selected or more
        if ($(':checkbox:checked').length > 0) {
            disabled2 = false;
        } else {
            disabled2 = true;
        }
        loadButton();
    });

    function loadButton() {
        if(!disabled1 && !disabled2) {
            $('#btnAddUser').removeAttr('disabled');
        } else{
            $('#btnAddUser').attr('disabled', 'disabled');
        }
    }

    loadButton();
});

参见 jsfiddle：

http://jsfiddle.net/VDesign/xdvh05yy/1/

Answer 2

尝试

$(document).ready(function() {
  var $btn = $('#btnAddUser').prop('disabled', true);

  var $checks = $("input[type='checkbox']").click(action);

  //use multiple selectors
  var $texts = $('#txtName, #txtLastname').on("keyup", action);

  function action() {
    $btn.prop('disabled', !$checks.is(':checked') || $texts.filter(function() {
      return !this.value.trim().length
    }).length > 0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<br />
<input id="txtName" />
<input id="txtLastname" />
<br />
<input id="btnAddUser" type="button" value="Save" />

jquery 复选框和文本框验证

jquery checkbox and textbox validation

checkbox

jquery

textbox