mardi 25 août 2015

jQuery Mobile: checkbox in collapsbile header cannot be checked more than once

On my jQuery Mobile website (1.4.5), in my collapsible header I use a checkbox. The following code almost works perfectly, my problem is that an unchecked checkbox can only be checked and rechecked once. Checking it again (= third click) is not possible. I don't see the problem:

HTML:

<div id="collapsibleSetWrapper" data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="true">
        <h3>
           <span>some title</span>
           <input class="mycheckbox" type="checkbox" id="uniqueID"/>
           <label for="uniqueID">Click me</label>
        </h3>
        <div id="mycontent">
              <p>this is the content</p>
        </div>
    </div>
</div>

Javascript:

$('#collapsibleSetWrapper .mycheckbox').checkboxradio({
            create: function(event,ui){
                var checkbox = $(event.target);
                var clickTarget = $(event.target).parent();
                $(clickTarget).click(function(e){
                    console.log(checkbox);

                    if($(checkbox).is(':checked')){
                        $(checkbox).attr("checked",false).checkboxradio('refresh');
                        // select all the nested checkboxes here
                    }
                    else{
                        $(checkbox).attr("checked",true).checkboxradio('refresh');
                        // unselect all the nested checkboxes here
                    }
                    e.preventDefault();
                    return false;
                });
            }
        })




Aucun commentaire:

Enregistrer un commentaire