启用禁用的复选框，然后使用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> 

Answer 1

The code ( $("#restprovider").click(); ) works in Chrome but not in eg 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:

• Force DOM redraw/refresh on Chrome/Mac
• How can I force WebKit to redraw/repaint to propagate style changes?

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 eg 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> 

Answer 2

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> 

Answer 3

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 .

Answer 4

your code works good. you can resimple code with:

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

Answer 5

如果您想要一个看起来已被禁用的复选框，则可以这样操作：

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