jqueryhtmlcssicheck

Remove or add disabled to iCheck radio input


I have a radio input that uses iCheck jquery library. My radio input is disabled by default. I use jquery to enable the radio input using jquery prop(). Now my problem is when i enable the radio input, I'm not able to view the normal iCheck flat skin, instead I'm getting the disabled check view.

How do I fix this.

My HTML

<div class="radio">
 <label>
   <input type="radio" name="iCheck" id="iCheck" value="No" class="flat" disabled="disabled"> No
 </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="iCheck" id="iCheck" value="Yes" class="flat" disabled> Yes
  </label>
</div>

Disable Radio Input

After enabling the input through jquery

This is what I expect

Any help would be greately appreciated

UPDATE :

I have an edit button. On click edit button I can check the radio button.

<div class="rightpane">
    <button class="edit-btn">
        Edit
    </button>
</div>

My jquery

$(document).on('click', '.edit-btn', function() {
        $('#iCheck').prop('disabled', false);
    });

Solution

  • When you are enabling the radio input using jquery prop(). Technically, you are adding checked property as true at the same time You need to add disabled property false for your desired output.

    Your Jquery be like

    $(document).on('click', '.edit-btn', function() {
       $('#iCheck').prop('disabled', false);
       $('#iCheck').prop('checked', true).iCheck('update');
    });