为什么 JQuery NOT 选择器在 Type Submit 上失败但在 Type Button 上有效答案

【问题标题】：Why does JQuery NOT selector failed on Type Submit but works on Type Button为什么 JQuery NOT 选择器在 Type Submit 上失败但在 Type Button 上有效
【发布时间】：2013-06-24 18:47:05
【问题描述】：

我有这段代码，我已经更改和调整了太多次，但如果表单按钮是type="submit"，它就不起作用，我可以忍受，但有什么原因，有人可以告诉我为什么？如果我将类型更改为type="button"，那么它可以工作。

$(document).ready(function () {
    $('#btnSubmit').attr('disabled', true);
    $('#myForm :input:not(#btnSubmit)').blur(function () {
        if ($('#myField').val() == '') {
            $('#btnSubmit').attr('disabled', true);
        } else {
            $('#btnSubmit').attr('disabled', false);
        }
    });
});

我有大约 25 本书，它们告诉你如何使用 Not 运算符，但现在哪里说表单按钮必须有一个类型按钮而不是提交类型才能工作。

只是想学习。

注意：上面的代码已经更改了很多次，我试图找出原因。

<form name="myForm" id="myForm" method="post" action="">
  <label for="myField">Name</label>
  <input type="text" name="myField" id="myField">
  <input type="button" name="btnSubmit" id="btnSubmit" value="Submit">
</form>

更新：

*我遇到的问题是，当我单击按钮时，按钮再次被禁用：有人可以向我解释为什么会发生这种情况吗？在我输入一些值并离开该字段后，该按钮被启用，但是，一旦我单击它就会被禁用。

但是，如果我将输入类型更改为按钮，则单击时按钮不会被禁用。我不确定为什么会这样。这就是为什么我最初认为这是一个错误或某种支持问题。

只是好奇和知识的好处。*

【问题讨论】：

未经测试 '#myForm input:not(#btnSubmit)' 或 $('#myForm input).not('#btnSubmit')
能否提供jsfiddle的链接
你用的是什么版本的jQuery？
请向我们展示您的标记！哪些选择器没有按预期工作，它错过/选择了太多？
在这里工作正常jsfiddle.net/psradich/fXCR8我们可以看到你的html吗？

标签： javascript jquery

【解决方案1】：

我怀疑您的 not 声明可能很好。你确定它失败了，你调试过它吗？您的问题可能真的在这里：

$('#btnSubmit').attr('disabled', true);

查看关于.attr() 和.prop() 的jQuery 文档。您应该在这里使用.prop()，因为如果您不了解它的工作原理，.attr() 通常会给您带来意想不到的结果。

因此，更改您的代码以使用 prop，如果这不能解决您的问题，请调试您的 not 选择器。

$('#btnSubmit').prop('disabled', true);

编辑：

根据您的评论，我再次审核了您的问题。这是怎么回事：

输入一个值
按钮启用
按下按钮
页面帖子和回发后，按钮被禁用
您希望在回发后启用该按钮

如果是这样，问题是您在页面加载时禁用了按钮，但仅在模糊事件中启用它。回发后，模糊不会自动发生，但实际上最简单的解决方案是在禁用按钮后手动触发模糊（如果触发模糊，真的不需要禁用它）：

$(document).ready(function () {
    $('#btnSubmit').prop('disabled', true);

    $('#myForm :input:not(#btnSubmit)').blur(function () {
        if ($('#myField').val() == '') {
            $('#btnSubmit').prop('disabled', true);
        } else {
            $('#btnSubmit').prop('disabled', false);
        }
    });

   $('#myField').blur();
});

【讨论】：

即使在提交之后，只要字段包含值，我如何保持按钮启用？
已编辑的答案，也许有帮助。
谢谢 Mike：有道理。我知道这不是最初的问题，但实际上，表单会有很多字段，我将遍历每个字段检查一个值，然后启用按钮。再次感谢您的示例：

【解决方案2】：

您的代码确实有效，这里：http://jsfiddle.net/AstDerek/s5cyk/

您希望您使用的代码会发生什么？

原答案：

我不太了解您的代码的作用，但您似乎正在尝试使用 :input 选择器来定位 button，因此您的代码无法按预期工作。也许这个选择器可以完成这项工作：

$('#myForm :input:not(#btnSubmit), #myForm button:not(#btnSubmit)')

【讨论】：

如果表单字段有效/无效，我很容易尝试禁用按钮。

【解决方案3】：

如果您只有一个输入字段，那么您为什么要尝试使用非选择器。你可以通过它的id来获取它。

$("#myField").blur(function(){    
    // Do stuff here.. 
});

如果你想获取除提交按钮之外的所有元素，你可以试试：

$("#myForm").children("input[type=text]").each(function(){
    // Do stuff here..
});

【讨论】：