0

I've been trying to get this code to work and everything seems correct but I can't get attr - "disabled" to be removed. The button disables initially but then when the fields are populated the "else" part does not fire. I thought this should execute after every "change", but it appears to not loop through the inputs correctly.

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>

Compiled 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");
      }
    });
  });
});
4

2 回答 2

1

您的 CoffeeScript 中的缩进是错误的，并且由于 CoffeeScript 的块结构是基于缩进的，因此您的 CoffeeScript 会感到困惑。你在顶层有三件事；您绑定一个空的更改处理程序：

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

然后你分配给empty：

empty = false

然后最后你遍历所有<input>里面的 s #gradesModal：

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

和在处理程序empty = false之外。看看你的 CoffeeScript 变成的 JavaScript，你就会明白为什么它不起作用。.eachchange

如果您正确缩进，以便所有内容都进入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"

另请注意，在失去焦点之前不会触发change来自 an 的事件，因此也要注意这一点。切换到事件可能会给您带来更好的用户体验。<input><input>keypress

于 2013-09-28T00:57:57.753 回答
0

使用.prop()而不是.attr()

启用

$("#add-grade").prop "disabled", true

禁用

$("#add-grade").prop "disabled", false

阅读：属性与属性

于 2013-09-27T23:54:52.163 回答