为什么JQuery NOT选择器在Type Submit上失败但在Type Button上工作

时间:2013-06-24 18:47:06

标签: javascript jquery

我有这个代码,我已经更改并调整了太多次来计算,但是如果表单按钮是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本JQuery书籍,他们告诉你如何使用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>

更新

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

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

只是好奇并且知识知识的好处。*

3 个答案:

答案 0 :(得分:2)

我怀疑你的声明可能没问题。你确定它失败了,你调试过吗?您的问题可能就在这里:

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

查看被视为.attr().prop()的jQuery文档。您应该在.prop()使用此.attr(),因为$('#btnSubmit').prop('disabled', true); 如果您不了解其工作原理,通常会给您带来意想不到的结果。

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

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

修改

根据您的评论,我再次审核了您的问题。这是发生了什么:

  1. 输入值
  2. 按钮启用
  3. 按下按钮
  4. 页面帖子和回发后,按钮被禁用
  5. 您希望在回发后启用该按钮
  6. 如果是这样,问题是您在页面加载时禁用了按钮,但仅在模糊事件上启用它。在回发后,模糊不仅会自动发生,但实际上最简单的解决方案是在禁用按钮后手动触发模糊(如果触发模糊,实际上您不需要禁用模糊):

    {{1}}

答案 1 :(得分:0)

您的代码确实有效,在此处:http://jsfiddle.net/AstDerek/s5cyk/

您对使用的代码有什么期望?


原始答案:

我真的不明白你的代码是做什么的,但似乎你试图用button选择器定位:input,所以你的代码不能按预期工作。也许这个选择器可以完成这项工作:

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

答案 2 :(得分:0)

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

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

如果你想获得除提交按钮以外的所有元素,你可以尝试:

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