Enable disabled checkbox and then click it with jquery

Question

I try to enable a checkbox and then click it via code. But it doesn't work. If I click the enable and click checkbox button the checkbox toggles. But if I press disable checkbox first it only gets enabled and not clicked by pressing enable and click checkbox button.

function disableCheckbox() {
 $("#restprovider").prop("disabled", true);
}
function enableCheckboxAndClick() {
 $("#restprovider").prop("disabled", false);
  $("#restprovider").click();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="restprovider" type="checkbox">
<button onclick="disableCheckbox()">
disable checkbox
</button>
<button onclick="enableCheckboxAndClick()">
enable and click checkbox
</button>

By click the checkbox do you mean you want to set it to checked? A click is not the best way to do that - you can just set it to checked — StudioTime, Mar 23 '18 at 08:24
I can do this with `$("#restprovider").prop("checked", true/false);`, too. But that would not fire the onclick method from the checkbox — ochs.tobi, Mar 23 '18 at 08:34
I just noticed your question edit. First: It is not only _older Firefox versions_ this happens to, I use their latest and it has the same issue. ... Second: Is it the `onclick` event you want to fire for the input or just toggle its checked status? ... Am asking, as if it's to really fire the event, the solution the accepted answer shows won't work either (seen here [https://jsfiddle.net/cr29y1tc/382/](https://jsfiddle.net/cr29y1tc/382/)), for the same reason I explained in my answer. If it is to set or toggle the state, then I updated my answer with a much simpler solution to accomplish that. — Asons, Mar 25 '18 at 17:14

Asons · Accepted Answer · 2018-03-28T12:02:59.437

The code ($("#restprovider").click();) works in Chrome but not in e.g. Firefox v.58.

The issue appears to be related to the fact that Firefox doesn't recognize the checkbox as enabled until after a redraw is made.

One option to fix that is to wrap the click() call in a setTimeout(), as shown in below sample, but there are several more options:

Note, the here used timeout value of 4ms might not work cross browser, so its value might has to be adjusted a little.

Stack snippet

function disableCheckbox() {
  $("#restprovider").prop("disabled", true);
}

function enableCheckboxAndClick() {
  $("#restprovider").prop("disabled", false);
  setTimeout(function() {
    $("#restprovider").click();
  }, 4)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="restprovider" type="checkbox">
<button onclick="disableCheckbox()">
disable checkbox
</button>
<button onclick="enableCheckboxAndClick()">
enable and click checkbox
</button>

Updated after a question edit

If you are only interested e.g. in toggling the input's checked state, simply do like this:

function disableCheckbox() {
  $("#restprovider").prop("disabled", true);
}

function enableCheckboxAndClick() {
  $("#restprovider").prop("disabled", false);
  $("#restprovider").prop("checked", function() { this.checked = !this.checked });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="restprovider" type="checkbox">
<button onclick="disableCheckbox()">
disable checkbox
</button>
<button onclick="enableCheckboxAndClick()">
enable and click checkbox
</button>

@ochs.tobi You're welcome. I updated with a link that show some more ways to force a redraw. — Asons, Mar 23 '18 at 08:44

Surya Neupane · Answer 2 · 2018-03-23T09:01:15.187

Instead of

  $("#restprovider").click();

Use

 $("#restprovider").prop( "checked", true );

Now It won't toggle.

function disableCheckbox() {
 $("#restprovider").prop("disabled", true);
}
function enableCheckboxAndClick() {
 $("#restprovider").prop("disabled", false);
  $("#restprovider").prop( "checked", true );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="restprovider" type="checkbox">
<button onclick="disableCheckbox()">
disable checkbox
</button>
<button onclick="enableCheckboxAndClick()">
enable and click checkbox
</button>

score 0 · Answer 3 · answered Mar 23 '18 at 08:45

One way is to use checked property instead:

var $restprovider = $('#restprovider');

function disableCheckbox() {
    $restprovider.prop("disabled", true);
}

function enableCheckboxAndClick() {  
    $restprovider.prop('disabled', false);
    $restprovider[0].checked 
        ? ($restprovider.click(), $restprovider.prop('checked', false)) 
        : $restprovider.prop('checked', true);
}

And here's an example.

score -1 · Answer 4 · answered Mar 23 '18 at 08:26

-1

your code works good. you can resimple code with:

$("#restprovider").prop("disabled", false).click();

answered Mar 23 '18 at 08:26

Cuong Do

29
3

score -1 · Answer 5 · answered Mar 29 '18 at 11:31

-1

If you want a checkbox that looks like it is disabled, you can do it like that:

$('#restprovider').css({pointerEvents:"none", opacity:0.5});

answered Mar 29 '18 at 11:31

Enable disabled checkbox and then click it with jquery

5 Answers5