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應用於form元素，form元素仍然返回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

您要設置/刪除輸入元素的禁用屬性 ，而不是設置僅用於顯示目的的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演示

另外，請確保在用戶在輸入字段中按下Enter鍵時處理表單的提交，您可以使用jQuery .submit事件處理程序並防止默認行為來進行提交 。 處理此服務器端也很重要。

編輯：我只是注意到CSS在做什么，更新的答案。