Question

I have a form that is divided up into a Kendo UI Panel Bar. In the first panel I have a field that when populated with any text, checks a checkbox that is currently not visible and is located within the collapsed panel below it.

My issue is that the checkbox doesn’t check. I’ve read some posts on how a checkbox is disabled when it isn’t visible. Is there a workaround for this?

    function Validate(uid) {
    if ($("#SomeNumber_" + uid).val().length > 0) 
    {
        $("#MyCheckBox").attr('checked', true);  //This checkbox is display:none at the time this is set
        //Also tried these, but they didn't work:
        //$("#MyCheckBox").click();
        //var myCheckBox= document.getElementById("MyCheckBox");
        //myCheckBox.checked = true;
    }
}

Answer 1

Just tested the display none on a checkbox by dynamically changing it through a button. It works with display none set.

http://jsfiddle.net/jmsessink/hcWf8/1/

The following will set the attr of your checkbox to ‘checked’ –

this –

$('#MyCheckBox').attr('checked', true)

as well as

$('#MyCheckBox').attr('checked', 'checked')

as well as

document.getElementById('MyCheckBox').checked = true;

as well as

document.getElementById('MyCheckBox').checked = 'checked';

*edit – updated jsfiddle version to show these four methods