Rails, Coffee, JQuery - удалить не работает

0

Я пытался заставить этот код работать, и все кажется правильным, но я не могу получить attr - "disabled", который нужно удалить. Сначала кнопка отключается, но затем, когда заполняются поля, часть "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");
      }
    });
  });
});
Теги:
coffeescript

2 ответа

1
Лучший ответ

Отступ неправильно в вашем CoffeeScript, и поскольку структура блока CoffeeScript основана на отступе, ваш CoffeeScript запутан. У вас есть три вещи на верхнем уровне; вы связываете пустой обработчик изменений:

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

и затем вы назначаете empty:

empty = false

и затем, наконец, вы перебираете все <input> внутри #gradesModal:

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

.each empty = false и .each находятся вне обработчика change. Посмотрите на JavaScript, на который превращен ваш CoffeeScript, и вы поймете, почему он не работает.

Если вы правильно отступаете, чтобы все происходило внутри обработчика 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> не будут запускаться до тех пор, пока <input> потеряет фокус, поэтому следите за этим. Переключение на события keypress может дать вам лучший пользовательский интерфейс.

Поделиться
  • 0
    Я сделал некоторые изменения, и все еще кажется, что удаление атрибута все еще не работает. Может ли выпадающий список вызвать проблему, поскольку он помечен как <select>, а не как ввод? Спасибо за ваш вклад и скрипку. Привычка проверять скомпилированный js - это то, что мне нужно сделать.
  • 0
    Как выглядит ваш HTML? Что значит "не работает"? Вы прошли через код с помощью отладчика или добавили пару вызовов console.log чтобы посмотреть, что он делает?
Показать ещё 4 комментария
0

Используйте .prop() вместо .attr()

Включить

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

Отключить

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

Читать: Атрибуты Vs Свойства

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню