combine checkbox with jquery mobile listview

Question

I'd like to use a jqm styled checkbox in my listview cells. I've made a composite picture to show the desired end result:

http://tinyurl.com/ctvko27

Whenever I use the jqm checkbox with a label it gets a big styling from the framework, which I do not want. I don't want to use the fieldset feature since these are always inset and I need the list to be 100% width. I want to be able to use the checkbox, fully styled, on its own as part of my listview cell. I hope my question is clear and that someone can provide some guidance.

Regards, Ivo

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Solution

Here's a solution for you, I had a spare time so here it is: http://jsfiddle.net/Gajotres/ek2QT/

Javascript code:

First on pagebeforeshow select/unselect our custom checkboxes.

$('#index').live('pagebeforeshow',function(e,data){
    $('input[type="checkbox"]').each(function(){
        ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');   
    });
});

This part will handle checkbox changing states.

$('.checkBoxLeft').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')){
        $(this).removeClass('checked').addClass('not-checked');
        $(this).find('input[type="checkbox"]').attr('checked' , false);
    } else {
        $(this).removeClass('not-checked').addClass('checked');             
        $(this).find('input[type="checkbox"]').attr('checked' , true);
    }
});

Rest off the css is in the example, img used for custom states can be found here:

Final notes

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 29, 2012 at 21:07

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivo Over a year ago

Wow, this was actually more involved than I initially thought. Thank you very much for this and a well deserved accepted answer.

andleer · Accepted Answer · 2012-11-29 19:34:10Z

0

There are a couple of approaches that might work. You might try placing the checkbox head of the hyperlink <a /> tag. You might also disable the automatic enhancement on your checkbox. Fundamentally you are going to have issues with touch events and any overlap of the two controls.

<input type="checkbox" data-role="none" />

edited Nov 29, 2012 at 19:34

answered Nov 29, 2012 at 19:28

andleer

22.6k8 gold badges65 silver badges85 bronze badges

1 Comment

Ivo Over a year ago

Thanks for your reply. Contrary to my image the list items will not be clickable (not nested), so I think I won't have issues with overlap of two controls. The markup you suggested results in a small, non styled, checkbox unfortunately.

maurcz · Accepted Answer · 2013-10-09 19:43:33Z

0

Just tried to use Gajotre's solution with the latest versions of jquery (1.9.1) + jquerymobile (1.3.2) but unfortunately it didn't work.

You have to change the

$(this).find('input[type="checkbox"]').attr('checked' , false);
$(this).find('input[type="checkbox"]').attr('checked' , true);

to

$(this).find('input[type="checkbox"]').prop('checked' , false);
$(this).find('input[type="checkbox"]').prop('checked' , true);

otherwise you'll be able to change the checkbox "checked" value only once.

edited Oct 9, 2013 at 19:43

answered Oct 9, 2013 at 17:56

maurcz

3413 silver badges11 bronze badges

Collectives™ on Stack Overflow

combine checkbox with jquery mobile listview

3 Answers 3

Solution

Final notes

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution

Final notes

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related