Changing class to check a check box JavaScript

Question

I have a modal form which is populated with data from my database on pageload.

The data is being passed and populated in the modal corectly - however when a checkbox is checked it is not showing the checked animation and looks to be unchecked.

I know it to be checked though as on the first click of the checkbox it appears to do nothing and still looks to be unchecked, then on the second click it checks the checkbox.

On inspecting the page before and after a click on a checkbox I noticed that icheckbox_minimal & aria-checked="false" also need to change to make the checked gfx look checked. How can I change these using JavaScript?

<span type="checkbox" class="" name="cbxScheduleEditTue"><div class="icheckbox_minimal" aria-checked="false" aria-disabled="false" style="position: relative;"><input id="ContentPlaceHolder2_cbxScheduleEditTue" type="checkbox" name="ctl00$ContentPlaceHolder2$cbxScheduleEditTue" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></span>

It may help to know I'm using the following:

<script src="js/bootstrap.min.js"></script>
<script src="js/icheck.js"></script>

My javascript:

<!-- Function - modalEditSchedule -->
<script type="text/javascript">
    function modalEditSchedule(ScheduleRatesID, tempStartDate, tempEndDate, start, endtime, mon, tue, wed, thu, fri, sat, sun, CarersReq) {
        document.getElementById('<%=sidInput.ClientID%>').value = ScheduleRatesID;
        document.getElementById('<%=txtScheduleEditStartDate.ClientID%>').value = tempStartDate;
        document.getElementById('<%=txtScheduleEditEndDate.ClientID%>').value = tempEndDate;
        document.getElementById('<%=txtScheduleEditStartTime.ClientID%>').value = start;
        document.getElementById('<%=txtScheduleEditEndTime.ClientID%>').value = endtime;
        if (mon == 'Yes') {
            document.getElementById('<%=cbxScheduleEditMon.ClientID%>').checked = true;
        }
        if (tue == 'Yes') {
            document.getElementById('<%=cbxScheduleEditTue.ClientID%>').checked = true;
        }
        if (wed == 'Yes') {
            document.getElementById('<%=cbxScheduleEditWed.ClientID%>').checked = true;
        }
        if (thu == 'Yes') {
            document.getElementById('<%=cbxScheduleEditThu.ClientID%>').checked = true;
        }
        if (fri == 'Yes') {
            document.getElementById('<%=cbxScheduleEditFri.ClientID%>').checked = true;
        }
        if (sat == 'Yes') {
            document.getElementById('<%=cbxScheduleEditSat.ClientID%>').checked = true;
        }
        if (sun == 'Yes') {
            document.getElementById('<%=cbxScheduleEditSun.ClientID%>').checked = true;
        }
        document.getElementById('<%=ddlScheduleEditCarersReq.ClientID%>').value = CarersReq;
    };
</script>

Please provide a working example. There is too much unnecessary code in your question, just focus on your problem. — roNn23, May 13 '16 at 09:13
And with working example we mean HTML and JAVASCRIPT, not some ASP. You have a snippet editor in the question editor - please use it — mplungjan, May 13 '16 at 09:14

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

The Icheck utility (js/icheck.js) is hijaking and wrapping your checkboxes, thats why your methods are overriden by the icheck behaviour. Learn about it.

// try replacing this calls: 
document.getElementById('<%=cbxScheduleEditSun.ClientID%>').checked = true;

// by this ones (dont forget to add the '#' at the beggining):
$('#<%=cbxScheduleEditSun.ClientID%>').iCheck('check');

or, as a complementary you can use pure jQuery, read this answer.

edited May 23 '17 at 11:52

Community

1
1

answered May 13 '16 at 09:25

christian

538
5
8

Thank you this explained why it wasn't working and also offered the solution that worked – Josh Cooper May 13 '16 at 09:55

score 0 · Answer 2 · answered May 13 '16 at 09:41

0

You can change any attribute of an element by using the setAttribute function.

document.getElementById('<%=cbxScheduleEditWed.ClientID%>').setAttribute('aria-checked', 'false');

answered May 13 '16 at 09:41

iuliu.net

6,666
6
46
69

Changing class to check a check box JavaScript

2 Answers2