How to Check "Checkbox" Dynamically - Jquery Mobile

How to check checkbox dynamically - jQuery Mobile

You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.

Demo

$('.selector').prop('checked', true).checkboxradio('refresh');

Reference: jQuery Mobile API

jquery mobile dynamically check multiple checkboxes

The way jQuery mobile works is that it essentially uses your select/option elements to create it's own list and that list is the one we're seeing in your screen shot. The list does not use actual checkboxes, it uses classes .ui-checkbox-on and .ui-checkbox-off to simulate the selecting of an item.

So the snippet of code I made before gets the text (country names) of the options you want, based on the values provided in the first array and then uses it to add the necessary classes to the links that contain the text of the countries.

var myarray = ["4","248"];

$(myarray).each(function(key, value){ //for each element in array
    var textarray = [$('option[value="4"]').text(), $('option[value="248"]').text()];  //get the text of each option based on it's value (you have to make this dynamic, I hard coded this) and put it in an array

    $('#Country-listbox ul li').find('a:contains("' + textarray[key] +'")').addClass('ui-checkbox-on').removeClass('ui-checkbox-off'); //get the link that contains the text we want (which is in the array we made before) and add the class that checks the box and remove the class that takes the check off

});

Country-listbox is the name of the div that contains the list that jQuery creates based on your option/selects. It names the div the way it does based on the id of your select element.

jQuery mobile: adding checkbox dynamically

Try this way:

$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");

I hope this helps you!

Jquery mobile checking checkbox dynamically is not working

You need to use .checkboxradio() for jQuery mobile

$('#checkit').click(function () {
    $("input[name='d11']").prop('checked', true).checkboxradio('refresh');
});

DEMO

jQuery-Mobile checkboxes dynamically added through Knockout can't be checked

I looked into the jQuery Mobile Demos again and found data-role="none". It prevents JQM from auto-enhancing an element. Now I can add checkboxes and let the BindingHandler enhance them through checkbox.checkboxradio() afterwards.

Now the checkbox looks like this:

<button data-bind="click: add">Add checkbox</button>

<!-- show checked boxes -->
Checked: 
<div id="checkedBoxes" data-bind="foreach: boxes">
    <span data-bind="text: name, if: checked"></span>
</div>
<hr>

<!-- checkboxes -->
<div id="newBoxes" data-bind="foreach: boxes">
    <label>
        <input type="checkbox" data-bind="checkbox: checked" data-role="none" />
        <span data-bind="text: name"></span>
    </label>
</div>

And in the BindingHandlers init method, checkbox.removeAttr('data-role') is used to let JQM enhance the element via checkbox.checkboxradio():

ko.bindingHandlers.checkbox = {
    init: function(element, valueAccessor) {    
        // set the dom element to a checkbox and initialize it (for jquerymobile)
        var checkbox = $(element);
        // let jquerymobile enhance the element
        checkbox.removeAttr('data-role');
        // make it so
        checkbox.checkboxradio();
        // register change event to update the model on changes to the dom
        checkbox.on('change', function(e) {
            valueAccessor()(this.checked);
        });
    },
    update: function(element, valueAccessor) {
        // update the checked binding, i.e., check or uncheck the checkbox
        ko.bindingHandlers.checked.update(element, valueAccessor);

        // and refresh the element (for jquerymobile)
        var checkbox = $(element);
        checkbox.checkboxradio('refresh');
    }
};

var BoxModel = function(id, name, checked) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);

    // checkbox state
    self.checked = ko.observable(checked);    
};

function MainViewModel()
{
    var self = this;
    // hold all added checkboxes
    self.boxes = ko.observableArray([]);

    // add new checkbox
    self.add = function () {
        var i = $('#newBoxes').find('input[type=checkbox]').length + 1;
        self.boxes.push(new BoxModel('id'+i, 'name'+i, false));
    }
}

ko.applyBindings(new MainViewModel());

Here is an updated fiddle: http://jsfiddle.net/USpX5/5/

how to check checkbox event dynamically created in javascript using jquery mobile

You need to use on() for event delegation like,

$('#lightsList').on('click', '.regular-checkbox', function() {
    checked();// call your function checked here
});

jQuery Mobile - adding list of checkbox dynamically

You have a mistake in creating checkboxes. Label's for attribute should match checkbox's id.

From this:

$("fieldset").append('<input type="checkbox" name="' + name + '" id="' + id + '"><label for="' + name + '">' + name + '</label>');

To this:

$("fieldset").append('<input type="checkbox" name="' + name + '" id="id' + i + '"><label for="id' + i + '">' + name + '</label>');

Demo

Jquery Mobile Select check boxes on navbar button click

You can listen to the click event for whatever element, in this case your All checkbutton, and then select all the checkboxes and set the checked property using .prop(). Here's an updated fiddle showing the checks toggling on and off. http://jsfiddle.net/8dyn9e7s/1/

Edit: I would suggest giving your link a unique class to listen for, or an id, so it doesn't have to listen to just the ui-click class. Also you may want to handle a case where you don't have any checkboxes otherwise the condition check won't work and it would be better to scope your checkboxes with a class as well so you don't just grab all of them like the example

Controlling multiple checkboxes dynamically in JQuery Mobile

You should use prop instead of attr:

$("#group_control").click(function() {
    //alert("Group checked? "+$('#group_control').is(':checked'));
    $("INPUT[class='cXX']").prop('checked', this.checked).checkboxradio("refresh");
});

Working demo: http://jsfiddle.net/XR44Q/4/

Take a look at this thread about the differences between attributes and properties.

---

Related Topics