css/javascript 元素在应该返回 true 时返回 false

Question

我有一个单字段表单（文本输入和提交按钮）。这是表单代码：

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
    </li>
    <li class="td80">
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

使用 javascript，如果在文本字段中输入文本，则提交按钮应该是不可点击的。如果字段中没有文本，它应该是可点击的。我通过使用 javascript 删除和/或放回按钮添加禁用类来做到这一点。这是javascript：

(function($){
    $(document).on('focusin', '#resume-field', function() {
        $(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
    }).on('focusout', '#resume-field', function(){
        if(this.value==' '||this.title==this.value) {
            $(this).parents().find('.button-add').addClass('button-add-disabled');
        } else {
            $(this).parents().find('.button-add').removeClass('button-add-disabled');
        }

    });     

    $('.button-add-disabled').click(function(){
        return false;
    });
}(jQuery));

这里是css：

.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block; 
   font-size: 11px; line-height: 28px ; color: #fff; text-align: center; 
   font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto; 
   border-radius: 3px; }
.button-add:hover { text-decoration: none;
   -webkit-transition:none; 
      -moz-transition:none; 
       -ms-transition:none; 
        -o-transition:none; 
           transition:none; 
}
.td80 .button-add { margin-left:35px !important;  }
.button-add-disabled { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px;  }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0;  }

类正在按预期进行更改，并且 javascript 正在运行。但是由于某种原因，即使 .button-add-disabled 没有应用于表单元素，表单元素仍然返回 false，因此不会提交。当javascript删除“button-add-disabled”时，表单应该提交。我可以看到服务器日志。如果我从 javascript“return：false”中删除该行，则表单有效，所以我知道表单本身有效。我很确定javascript有问题。有什么想法吗？

Answer 1

不是这样的。事件绑定到通过选择器到达的元素；它们不绑定到选择器。

当您将事件直接绑定到元素时，该事件现在绑定到该元素，直到您显式取消绑定它。原来的选择器不再相关。

你需要这样做，或者类似的事情：

$('.button-add-disabled').click(function(){
  return !$(this).hasClass('button-add-disabled');
});

也就是说，测试按钮是否在引发事件时被您的类当前禁用。

顺便说一句，这...

if(this.value==' '||this.title==this.value) {
  $(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
  $(this).parents().find('.button-add').removeClass('button-add-disabled');
}

应该是这样的：

var disabled = this.value == ' ' || this.title == this.value;
$(this).parents().find('.button-add').toggleClass('button-add-disabled', disabled);

Answer 2

您想设置/删除输入元素的disabled attribute，而不是设置仅用于显示目的的 CSS 样式

$('#resume-field').on('change', function() {
    if ($(this).val().length == 0) {
        $(this.form).find('input[type=submit]').attr('disabled', false).removeClass('button-add-disabled');
    } else {
        $(this.form).find('input[type=submit]').attr('disabled', true).addClass('button-add-disabled');
    }
})

jsFiddle Demo

同时确保在用户在输入字段中按下回车键时处理表单的提交，您可以使用jQuery .submit 事件处理程序来执行此操作并防止默认行为。处理这个服务器端也很重要。

编辑：我刚刚注意到 CSS 在做什么，更新了答案。