Как отключить кнопку отправки по умолчанию, пока в ее текстовой области не будет введен 1 символ или более?

Установка отключенного атрибута не работает, поскольку при наличии отключенного атрибута поле отключается независимо от значения атрибута. Вы можете использовать .removeAttr("disabled"), но действительно имеет смысл манипулировать свойством disabled, которое более интуитивно понятно — это просто логическое значение.

$commentButton.prop({ disabled: !$commentBox.val());

На всякий случай привяжите к onkeyup, oninput и onchange:

$commentBox.on("keyup input change", function () {
    $commentButton.prop({ disabled: !$commentBox.val() });
});

Если вам нужно вручную включить или отключить кнопку, например, после очистки формы, вы можете передать true или false непосредственно в вызов .prop().

$commentButton.prop({ disabled: true });

Изменить: подробная разбивка

Метод .prop()

.prop()метод получает и устанавливает значения свойств элементов аналогично тому, как .attr() получает и устанавливает значения атрибутов элементов.

Учитывая этот jQuery:

var myBtn = $("#myBtn");
myBtn.prop("disabled", true);

Мы можем переписать это на простом JavaScript следующим образом:

var myBtn = document.getElementById("myBtn");
myBtn.disabled = true;

Почему нам не нужен оператор if

Причина, по которой нам не нужен оператор if, заключается в том, что свойство disabled принимает логическое значение. Мы могли поместить логическое выражение в оператор if, а затем, в зависимости от результата, назначить другое логическое выражение в качестве значения свойства:

if (someValue == true) {
    myObj.someProperty = false;
}
else {
    myObj.someProperty = true;
}

Первая проблема заключается в избыточности оператора if: if (someValue == true) можно сократить до if (someValue). Во-вторых, весь блок можно сократить до одного оператора, используя логический оператор "не" (!):

myObj.someProperty = !someValue;

Логический оператор "не" (!) возвращает отрицательный результат выражения, т.е. true для "ложных" значений и false для "истинных" значений. Если вы не знакомы с понятиями «правда» и «ложь», вот краткое руководство. Каждый раз, когда вы используете нелогическое значение там, где ожидается логическое значение, значение приводится к логическому. Значения, которые оцениваются как true, называются «истинными», а значения, которые оцениваются как false, называются «ложными».

 Type     Falsey values      Truthy values
 ———————— —————————————————— ——————————————————————
 Number   0, NaN             Any other number
 String   ""                 Any non-empty string
 Object   null, undefined    Any non-null object

Поскольку пустая строка оценивается как false, мы можем получить логическое значение, указывающее, есть ли какой-либо текст в текстовой области, применив ! к значению:

var isEmpty = !$commentBox.val();

Или используйте !!, чтобы выполнить двойное отрицание и эффективно привести строковое значение к логическому:

var hasValue = !!$commentBox.val();

Мы могли бы переписать jQuery сверху в более подробной форме на простом JavaScript:

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
var text = myTextBox.value;
var isEmpty = !text;
if (isEmpty) {
    myBtn.disabled = true;
}
else {
    myBtn.disabled = false;
}

Или немного короче и больше похоже на оригинал:

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
myBtn.disabled = !myTextBox.value;

Вы можете попробовать это:

var submit = $("input[type=submit]");
submit.attr("disabled","disabled");

$('textarea.comment_box').keyup(function() {
    if ( !$(this).val() ) {
       submit.attr("disabled","disabled");
    } else {
       submit.removeAttr("disabled");
    }
});

Вот JS Fiddle, чтобы вы могли попробовать это: http://jsfiddle.net/leniel/a2BND/

Вы можете сначала отключить кнопку отправки, и если textarea имеет значение, включите ее:

<form id="yourForm">
<textarea id="ta"></textarea>
<input id="submit" type="submit" disabled="disabled">    
<form> 

$("#yourForm").change(function() {

  if ( $("#ta").val().length >= 1) {

    $("#submit").removeAttr("disabled"); 
  }

  else {

    $("input").attr("disabled", "disabled");

  }              

});

http://jsfiddle.net/dY8Bg/2/

Вы можете выполнить эту задачу, используя событие keyup в текстовой области. пример кода концепции ниже.

$("#textareaid").on('keyup', function (e) {
     Count_Chars(this);
});

function Count_Chars(obj) {
    var len = obj.value.length;
    if (len >= 1) {
        // do task
        // enable post button
    }
}

​

Добавил это в существующий код, чтобы выполнить то, что я хотел. Отметил ответ, который помог мне больше всего, как выигрышный ответ, и отметил другие, которые помогли.

commentButton = form.children(".commentButtons").children(".commentButton");

       commentButton.attr("disabled","disabled");

        commentBox.keyup(function() {
            if ( !$(this).val() ) {
               commentButton.attr("disabled","disabled");
            } else {
               commentButton.removeAttr("disabled");
            }
        });