CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
QuestionMarks
QuestionMarks

Reputation: 246

Unable to check a checkbox via javascript

I have a form on a page, with a checkbox input field. I also have a table on the page with a column that has true/false values. Each row in the table also has a checkbox with id="selectedReviewTypeYear". There is also a button with id="getDataToEdit".

When the getDataToEdit button is clicked, the javascript checks to see if any id="selectedReviewTypeYear" boxes are checked. If a box is checked, a div is opened up with form fields prepopulated based on the row selected. If no boxes are checked, the div remains hidden.

My problem is that the checkboxes aren't getting checked when the table data is "true." Here is the javascript:

    $('#getDataToEdit').on('click', function (){
    $('#reviewTypeTable').find('tr').each(function (){
        var row = $(this);
        if (row.find('input[id="selectedReviewTypeYearID"]').is(':checked')){
            var idx = table.row(this).index();
            var vReviewName = document.getElementById("editReviewTypeYear-name");
            var vAllowMultiple = document.getElementById("allowMultiple");
            var vAllowMultipleSpan = document.getElementById("allowMultipleSpan");
            vReviewName.innerHTML = table.cell(idx, 2).data();
            if (table.cell(idx, 3).data() == "true"){
                $("#allowMultiple").prop("checked", true);
                vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
            }
            else {
                $("#allowMultiple").prop("checked", false);
                vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
            }
            showHide.style.visibility = 'visible';
        }
    })
});

For testing purposes, I added a span element to the form called allowMultipleSpan. This was simply so I could see if the javascript is able to read the data in the table field, which it is. When I select a row, then click the button, the div opens up with the vReviewName.innerHTML populated correctly as well as the allowMultipleSpan populated correctly. However, the checkbox is not getting checked if the data is "true".

I am running JQuery 2.1.1. So far, I have tried using the following variations of the script, all with the same result:

From the JQuery (1.6+) spec:

$("#allowMultiple").prop("checked", true);

From the jQuery (1.5-) spec:

$("#allowMultiple").attr("checked", true);

From the Javascript spec:

document.getElementById("allowMultiple").checked = true;

Here is the HTML for my form:

<div class="widget-header"><h3>Edit: <span id="editReviewTypeYear-name" style="color: blue"></span></h3></div>
                <div class="widget-content">
                    <form id="editReviewTypeYear-form" class="form-horizontal" url="submitReviewTypeYear.htm">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Allow Multiple: </label>
                            <div class="col-sm-10">
                                <input type="checkbox" id="allowMultiple" name="allowMultiple" />
                                <span id="allowMultipleSpan" style="color: blue"></span>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button id="submitReviewTypeYear" type="submit">Save</button>
                            <button class="btn btn-small btn-warning reg-cancel" id="submitReviewTypeYear-cancel" type="button" name="Cancel" value="cancel">Cancel</button>
                        </div>
                    </form>
                </div>

Upvotes: 0

Views: 901

Answers (1)

Lucas Rodrigues
Lucas Rodrigues

Reputation: 1192

Have you tried if (table.cell(idx, 3).data() == true)?

You were always getting the false condition because you were comparing a boolean with "true" as a string.

Upvotes: 1

Related Questions