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

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

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

当css / javascript元素返回true时返回false

2 个答案: