how to disable html input fields and buttons using jquery

Question

I am having trouble disabling a button. What I am trying to do is to disable the button unless typing some words in the input. The following is my code.

$('.btn.btn-default').click(function(){
    var post = $('input:text').val();
    $('<li>').text(post).prependTo('.posts');
    $('input:text').val("");
    $('.count').text('100');
    $('.btn.btn-default').addClass('disabled');
    });


$('input:text').keyup(function(){
    var postLength = (this).val().length;
    var charactersLeft = 100 - postLength;
    $('.count').text(charactersLeft);   
    if (charactersLeft < 0){
    $('.btn.btn-default').addClass('disabled');
    }
    else if (charactersLeft == 100){
        $('.btn.btn-default').addClass('disabled'); 
    }
    else{
        $('.btn.btn-default').removeClass('disabled');
    }
});

$('.btn.btn-default').addClass('disabled');

};

The following is my HTML

<div class= "blank">
    <input type="text" id="form-control" placeholder="Please Leave Comment Here."/>
    </div>


    <div class = "status">
    <div class= "count">100</div>
    <input class="btn btn-default" type="submit" value="Post">
    </div>

    <ul class="posts">
    </ul>

Just adding a `disabled` class doesn't automatically disable it. You need to use Bootstrap to do that. — Abraar Arique Diganto, Jul 22 '15 at 14:21
@Abraar Arique Thanks. I got it. I can either set the property or use bootstrap. both work. — Yuan Huang, Jul 22 '15 at 14:24

epascarello · Answer 1 · 2015-07-22T14:14:39.147

6

TYPO:

(this).val().length;
^^^

Add the missing $. You should be an error in your console pointing out that "val is not a function".

Also adding a class does not disable a button. You need to set the property.

$(".btn.btn-default").prop('disabled', true);
$(".btn.btn-default").prop('disabled', false);

edited Jul 22 '15 at 14:14

answered Jul 22 '15 at 14:04

epascarello

204,599
20
195
236

hi , thanks for the typo correction. the thing is that the button is not disabled. I don't know why. I did not type in anything in the input, and I can still click the Post button. – Yuan Huang Jul 22 '15 at 14:13
Adding a class does not disable a button! – epascarello Jul 22 '15 at 14:14
wow. It works. Thanks so much for the help. – Yuan Huang Jul 22 '15 at 14:21

how to disable html input fields and buttons using jquery

1 Answers1