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>
After enabling the input through jquery
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);
});
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');
});