How to disable a button by default, but then enable it with javascript?

如何禁用默认按钮,然后与javascript启用它?

Tags: javascript
标签: javascript

问题 (Question)

I have a text field with a counter next to it. But beneath that is the submit form, and I want it to be inactive (grayed out, unable to submit) unless they have typed 100 characters.

I'm using a jsfiddle which I found on here and adapted to demonstrate what I'm doing:

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

Does not seem to be working exactly right. First of all, it's not grayed initially... but when I begin typing, it then recognizes that there aren't 100 characters and it does disable.

But, my code should re-enable the button if the length is not less than 100, i.e. when it reaches or exceeds 100 characters. However, it does not. What am I doing wrong?

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

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

我有一个柜台旁边的文本字段。但是在提交表单,我希望它是不活跃的(显示为灰色,无法提交),除非他们已输入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');
    }
});

最佳答案 (Best Answer)

You want this in your JS:

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

and this in your HTML:

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

Demo: http://jsfiddle.net/xqyWV/398/

你想要在你的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

To fix your html you just need to add a disabled attribute to your submit button.

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

In you javascript the main issue is that you are setting the disabled attribute to the string "true" or "false". Change it to a Boolean true and false and you'll be all set.

$("#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/

修复html你只��要添加一个属性来禁用提交按钮。

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

在javascript的主要问题是你设置禁用属性字符串“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

For completeness sake here is the same answer without 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');

Demo: http://jsbin.com/torug/1/edit

为了完整性不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

An easier way would just add an onclick:

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

and then in your <script> area, you can do:

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

By doing this you add an onClick so that the button can call a specific function.

By default the page will load it without an onClick. By adding the attribute you can the enable it.

一种更简单的方法只会添加一个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页面加载它。您可以通过添加属性启用它。

本文翻译自StackoverFlow,英语好的童鞋可直接参考原文:http://stackoverflow.com/questions/23451942