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

尝试

＆＃13;

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

＆＃13;

<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" />

＆＃13;

jquery复选框和文本框验证

2 个答案: