How to remove disabled = "disabled" attribute from input submit field?

Question

I'm trouble having to remove the disabled="disabled" attribute from an input field.

Here are the three jQuery methods that I tried:

 jQuery('.db_single_lesson .ld-breadcrumbs:first input[type=submit]').removeAttr('disabled'); jQuery('.db_single_lesson .ld-breadcrumbs:first input[type=submit]').prop('disabled', false); jQuery('.db_single_lesson .ld-breadcrumbs:first input[type=submit]').removeProp('disabled');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="submit" value="Mark Complete" class="abcd" disabled="disabled">

But haven't been able to remove the disabled="disabled" attribute. Can any one tell what's wrong or how could I remove disabled attribute ?

Thanks

Answer 1

Let's look at the selector...

.db_single_lesson .ld-breadcrumbs:first input[type=submit]

This code is looking for some element with a db_single_lesson , containing another element with a ld-breadcrumbs class, whose first input is a submit type. You do not have these two containing classes. I have added them, and your first attempted solution with removeAttr() now works fine...

 jQuery('.db_single_lesson .ld-breadcrumbs:first input[type=submit]').removeAttr('disabled');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="db_single_lesson"> <div class="ld-breadcrumbs"> <input type="submit" value="Mark Complete" class="abcd" disabled="disabled"> </div> </div>

Answer 2

The proper way to enable a button in jQuery would be:

$('proper selector').prop('disabled', true);

it looks like you not selecting a button correctly, try to add id for selection to test the solution by itself. Next instead - also for testing - change maybe color on the button to ensure that you select it correctly.

Based on your selectors I would try

$('input.abcd').prop('disabled', true);

Answer 3

For selection of the first element can be used .first()

 jQuery('.db_single_lesson .ld-breadcrumbs input[type=submit]').first().removeAttr('disabled');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="db_single_lesson"> <div class="ld-breadcrumbs"> <input type="submit" value="Mark Complete" class="abcd" disabled="disabled"> </div> <div class="ld-breadcrumbs"> <input type="submit" value="Mark Complete" class="abcd" disabled="disabled"> </div> </div>

Answer 4

Try to call

$('.db_single_lesson .ld-breadcrumbs:first input[type=submit]').prop('disabled', '');

This should remove the disabled tag from your element.

This assumes that .db_single_lesson .ld-breadcrumbs:first input[type=submit] is the correct selector for your desired element. It is not clear from your question if this is correct for your button.

From your question only the line could look like this

$('input[type=submit]').prop('disabled', '');

Answer 5

There wasn't an issue with the selectors. I was getting length=1 for the selector. The problem was that some other script was overriding mine jquery script and hence it was not working. So I enclosed my script in the setTimeout function with a delay to get the desired result.

setTimeout(function(){
        jQuery('.db_single_lesson .ld-breadcrumbs:first input[type=submit]').removeAttr('disabled');
    }, 500);

Thanks