CODEWITHSUNDEEP
javascriptjquery
John John
John John

Reputation: 1

Unable to disable a button when users click on it

I have added the following jquery to disable all the buttons which have a class named .disableButton, as follow:-

$('.disableButton').on('click', function (e) {
    $(this).prop('disabled', true);
});//disable further clicks
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" value="Submit" class="disableButton btn btn-primary" />
<input type="text" class="disableButton" name="NPI" placeholder="" style="height: 50px;" />

but when i click on them the button will not get disabled..

Upvotes: -1

Views: 356

Answers (4)

Dupinder Singh
Dupinder Singh

Reputation: 7769

You are doing all good, but just a little mistake that is using this this will impact only on that specific element not all the elements

instead of this try this

        $('.disableButton').prop('disabled', true); 


    $('.disableButton').on('click', function (e) {
    		alert('disabling buttons, now after this buttons will not work'); 
        $('.disableButton').prop('disabled', true);
    });//disable further clicks
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <input type="submit" value="Submit" class="disableButton btn btn-primary" />
    
    <input type="submit" value="Submit 2" class="disableButton btn btn-primary" />
    
    <input type="submit" value="Submit 3" class="disableButton btn btn-primary" />
    
    <input type="text" class="disableButton" name="NPI" placeholder="" style="height: 50px;" />

Upvotes: 1

Mo&#239;ze
Mo&#239;ze

Reputation: 727

First, make sure that you script comes after your html buttons, then on your javascript, if you want all buttons or all elements that have the class disableButton to be disabled, use :

$('.disableButton').prop('disabled', true);

Isnstead of:

$(this).prop('disabled', true);

Because $(this) applies changes only on the clicked on button.

$('.disableButton').click(function (e) {
  $('.disableButton').prop('disabled', true);        
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" value="Submit" class="disableButton btn btn-primary" />
<input type="text" class="disableButton" name="NPI" placeholder="" style="height: 50px;">

Upvotes: -1

mehdi354
mehdi354

Reputation: 413

Why you need to add disabled option while clicking it. If you want to disable all the button which have the class name= disableButton you can disable by default. Use following code.

$(".disableButton").attr('disabled','disabled');

It will disable all the buttons by default

Upvotes: 1

halilcakar
halilcakar

Reputation: 1648

You have 2 options there, 1: use button id instead of a class to select it, in class selector jquery returns an array instead of the single element

2: just use e.target.disabled = true; //this is the native way

3: or you can do get the first element from $(this) which is gonna be the same with e from function(e)

Upvotes: 0

Related Questions