Question

我一直在努力让这些代码正常工作，一切看起来都是正确的，但我无法获取attr - “禁用”被删除。该按钮最初禁用，但是当填充字段时，“else”部分不会触发。我认为这应该在每次“更改”之后执行，但它似乎没有正确地循环输入。

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"

另请注意，在change失去焦点之前，<input>的{{1}}事件不会被触发，因此请注意这一点。切换到<input>事件可能会为您带来更好的用户体验。

Answer 2

使用.prop()代替.attr()

启用

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

禁用

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

阅读：Attributes Vs Properties

Rails，Coffee，jQuery - removeAttr不工作

2 个答案: