Rails，Coffee，jQuery - removeAttr不工作

Question

我一直試圖讓這段代碼工作，一切看起來都正確，但我無法獲取attr - 「disabled」被刪除。該按鈕最初禁用，但隨後填充字段時，「其他」部分不會觸發。我認爲這應該在每次「更改」後執行，但似乎沒有正確循環輸入。

static_pages.js.coffee ---

jQuery -> 
    $("#gradesModal :input").on('keypress', -> 
     empty = false 
     $("#gradesModal :input").each -> 
     empty = true if $(this).val() is "" 
     if empty 
      $("#add-grade").attr "disabled", "disabled" 
     else 
      $("#add-grade").removeAttr "disabled" 
) 

HTML ---

<div class="form-horizontal"> 
    <div class="control-group integer optional grade_student_id"><label class="integer optional control-label" for="grade_student_id">Student</label><div class="controls"><input class="numeric integer optional" id="grade_student_id" name="grade[student_id]" step="1" type="number" /></div></div><br /> 
    <div class="control-group integer optional grade_lesson_id"><label class="integer optional control-label" for="grade_lesson_id">Lesson</label><div class="controls"><input class="numeric integer optional" id="grade_lesson_id" name="grade[lesson_id]" step="1" type="number" /></div></div><br /> 
    <div class="control-group select optional grade_score"><label class="select optional control-label" for="grade_score">Score</label><div class="controls"><select autofocus="autofocus" class="select optional" id="grade_score" name="grade[score]"><option value=""></option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option></select></div></div><br /> 
    <div class="control-group text optional grade_comment"><label class="text optional control-label" for="grade_comment">Comment</label><div class="controls"><textarea class="text optional" cols="40" id="grade_comment" name="grade[comment]" rows="2"></textarea></div></div> 
    <input class="btn" id="add-grade" name="commit" type="submit" value="Create Grade" /> 
</div> 

編譯JS

jQuery(function() { 
    return $("#gradesModal :input").on('keypress', function() { 
    var empty; 
    empty = false; 
    return $("#gradesModal :input").each(function() { 
     if ($(this).val() === "") { 
     empty = true; 
     } 
     if (empty) { 
     return $("#add-grade").attr("disabled", "disabled"); 
     } else { 
     return $("#add-grade").removeAttr("disabled"); 
     } 
    }); 
    }); 
}); 

Answer 1

縮進是錯在你的CoffeeScript，自CoffeeScript中的塊結構是基於壓痕，你的CoffeeScript是困惑。頂層有三件事，綁定一個空的更改處理：

$("#gradesModal :input").change -> 

，然後分配給empty：

empty = false 

，然後最後你遍歷所有的<input>的內線#gradesModal：

$("#gradesModal :input").each -> 
    ... 

的empty = false和.each都是外change處理程序。看一下你的CoffeeScript被轉換成的JavaScript，你會明白爲什麼它不起作用。

如果你的縮進正確，使一切順利的change處理程序中：

$("#gradesModal :input").change -> 
    empty = false 
    $("#gradesModal :input").each -> 
    empty = true if $(this).val() is "" 
    if empty 
     $("#add-grade").attr "disabled", "disabled" 
    else 
     $("#add-grade").removeAttr "disabled" 

那麼事情應該開始更好的工作。

演示：http://jsfiddle.net/ambiguous/j5hCZ/

或者，也許你的意思是這樣的：

$("#gradesModal :input").change -> 
    empty = false 
    $("#gradesModal :input").each -> 
    empty = true if $(this).val() is "" 
    if empty 
    $("#add-grade").attr "disabled", "disabled" 
    else 
    $("#add-grade").removeAttr "disabled" 

或本：

$("#gradesModal :input").change -> 
    empty = false 
    $("#gradesModal :input").each -> 
    empty = true if(!$(this).val()) 
    if empty 
    $("#add-grade").attr "disabled", "disabled" 
    else 
    $("#add-grade").removeAttr "disabled" 

另外請注意，從<input>的change事件將不會被觸發，直到<input>失去了重點，所以要注意這一點。切換到keypress事件可能會爲您提供更好的用戶體驗。