當它應該返回true時返回false的css/javascript元素

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：預期和JavaScript工作

.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; } 

的類正在發生變化。由於某些原因，即使.button-add-disabled沒有應用於表單元素，表單元素仍然返回false，因此不會提交。當「按鈕添加禁用」被javascript刪除時，表單應該提交。我可以看到服務器日誌。如果我從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在做什麼，更新了答案。