mardi 5 avril 2016

Toggle checkbox with javascript not showing checked

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.

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>

My html:

<!-- Modal Edit Schedule -->
<div id="modalEditSchedule" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Edit Schedule</h4>
            </div>
            <div class="modal-body">
                <p>Complete the fields below to edit the Schedule for the Service User.</p>
                <br />
                <div class="row">
                    <div class="col-md-6">
                        <input name="sidInput" type="hidden" id="sidInput" runat="server" />
                        <p>Start Date</p>
                        <div class="input-icon datetime-pick date-only">
                            <asp:TextBox ID="txtScheduleEditStartDate" data-format="yyyy/MM/dd" runat="server" CssClass="form-control input-sm"></asp:TextBox>
                            <span class="add-on">
                                <i class="sa-plus"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <p>End Date</p>
                        <asp:TextBox ID="txtScheduleEditEndDate" runat="server" CssClass="form-control input-sm" placeholder="Leave blank if no End Date is known."></asp:TextBox>
                    </div>
                    <br />
                    <br />
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <p>Start Time</p>
                        <asp:TextBox ID="txtScheduleEditStartTime" runat="server" type="text" class="form-control input-sm mask-time" placeholder="Start Time (e.g. 15:00)" />
                    </div>
                    <div class="col-md-6">
                        <p>End Time</p>
                        <asp:TextBox ID="txtScheduleEditEndTime" runat="server" type="text" class="form-control input-sm mask-time" placeholder="End Time (e.g. 15:30)" />
                    </div>
                </div>
                <br />
                <div class="row">
                    <p>Select any days in which care at the above time will be required.</p>
                    <div class="col-md-3">
                        <p>Monday</p>
                        <asp:CheckBox ID="cbxScheduleEditMon" type="checkbox" class="" name="cbxScheduleEditMon" runat="server" />
                    </div>
                    <div class="col-md-3">
                        <p>Tuesday</p>
                        <asp:CheckBox ID="cbxScheduleEditTue" type="checkbox" class="" name="cbxScheduleEditTue" runat="server" />
                    </div>
                    <div class="col-md-3 m-b-15">
                        <p>Wednesday</p>
                        <asp:CheckBox ID="cbxScheduleEditWed" type="checkbox" class="" name="cbxScheduleEditWed" runat="server" />
                    </div>
                    <div class="col-md-3 m-b-15">
                        <p>Thursday</p>
                        <asp:CheckBox ID="cbxScheduleEditThu" type="checkbox" class="" name="cbxScheduleEditThu" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 m-b-15">
                        <p>Friday</p>
                        <asp:CheckBox ID="cbxScheduleEditFri" type="checkbox" class="" name="cbxScheduleEditFri" runat="server" />
                    </div>
                    <div class="col-md-3 m-b-15">
                        <p>Saturday</p>
                        <asp:CheckBox ID="cbxScheduleEditSat" type="checkbox" class="" name="cbxScheduleEditSat" runat="server" />
                    </div>
                    <div class="col-md-3 m-b-15">
                        <p>Sunday</p>
                        <asp:CheckBox ID="cbxScheduleEditSun" type="checkbox" class="" name="cbxScheduleEditSun" runat="server" />
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-6 m-b-15">
                        <p>Carers Required</p>
                        <asp:DropDownList ID="ddlScheduleEditCarersReq" runat="server" CssClass="form-control input-sm m-b-10">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                            <asp:ListItem>4</asp:ListItem>
                            <asp:ListItem>5</asp:ListItem>
                            <asp:ListItem>6</asp:ListItem>
                            <asp:ListItem>7</asp:ListItem>
                            <asp:ListItem>8</asp:ListItem>
                            <asp:ListItem>9</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnEditSchedule" runat="server" CssClass="btn btn-sm" Text="Save Changes" OnClick="btnEditSchedule_Click" OnClientClick="return confirm('Please confirm you have ticked ALL days where care is required?');"/>
                <button data-dismiss="modal" class="btn  btn-large">Close</button>
            </div>
        </div>
    </div>
</div>

Thanks!




Aucun commentaire:

Enregistrer un commentaire