如何默认禁用按钮，但然后使用javascript启用它？

Question

我有一个文本字段，旁边有一个计数器。 但在那之下是提交表单，我希望它不活动（灰显，无法提交），除非他们输入了100个字符。

我正在使用我在这里找到的一个jsfiddle并且适应了我正在做的事情：

http://jsfiddle.net/xqyWV/396/

似乎没有完全正确的工作。 首先，它最初并没有变灰...但是当我开始输入时，它会识别出没有100个字符并且它会禁用。

但是，如果长度不小于100，即当它达到或超过100个字符时，我的代码应该重新启用按钮。 但事实并非如此。 我究竟做错了什么？

$("#field").keyup(function() {
    el = $(this);
    $("#charNum").text(el.val().length);

    if(el.val().length < 100) {
        $('#submit').attr('disabled','true');
    } else {
        $('#submit').attr('disabled','false');
    }
});

Answer 1

你想在你的JS中这样：

$('#submit').removeAttr('disabled');

这在你的HTML中：

<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>

演示： http ： //jsfiddle.net/xqyWV/398/

Answer 2

要修复您的html，您只需要在提交按钮中添加禁用的属性。

<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;" disabled="disabled" />

在您的javascript中，主要问题是您将disabled属性设置为字符串“true”或“false”。 将它更改为布尔值true和false，您将全部设置。

$("#field").keyup(function(){
    el = $(this);
    $("#charNum").text(el.val().length);

    if(el.val().length > 100){
        $('#submit').attr('disabled', false);
    } else {
        $('#submit').attr('disabled', true);
    }
});

JsFiddle： http ： //jsfiddle.net/xqyWV/400/

Answer 3

为了完整起见，这里是没有 jQuery的相同答案：

HTML

<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>

JavaScript的

 document.getElementById('submit').removeAttribute('disabled'); 

演示： http ： //jsbin.com/torug/1/edit

Answer 4

一种更简单的方法就是添加一个onclick：

<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;"/>

然后在<script>区域中，您可以执行以下操作：

document.getElementById('submit').setAttribute('onClick','functionname()');

通过这样做，您添加一个onClick以便按钮可以调用特定的功能。

默认情况下，页面将加载它而不使用onClick。 通过添加属性，您可以启用它。

Answer 5

只需在HTML中添加：

disabled="true"

......改变它

<input type="submit" name="button" id="submit"  disabled="true"  value="do some stuff" style="float:left;width:160px;height:30px;" />

并在你的JS中添加：

$('#submit').removeAttr('disabled');