CODEWITHSUNDEEP
jquery-mobile
ninedoors
ninedoors

Reputation: 125

jQuery mobile - checkbox without a label

Has anyone written any extensions or know a way to have jQM create a checkbox without a label?

When you don't include a label jQM doesn't format it, it just leaves it as a regular checkbox. I have looked at the code and think there is a way to do it but don't want to mess with jQM base code if I don't have to.

I think this should be in the base code because you shouldn't have to have a label with a checkbox. Any thoughts on this would be great.

Nick

Upvotes: 3

Views: 8822

Answers (3)

John Langan
John Langan

Reputation: 51

Just a follow up on this, since I keep returning here with my JQM checkbox woes! An excellent little article here by one Rick Luna:

JQM Checkboxes Without Labels

Upvotes: 1

Leon
Leon

Reputation: 4532

JQM needs the label for accessibility, but there are ways to hide it - just add the appropriate class, as specified in the documentation

Either

  <label for="username" class="ui-hidden-accessible">Username:</label>
  <input type="text" name="username" id="username" value="" placeholder="Username"/>

or 

  <div data-role="fieldcontain" class="ui-hide-label">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" placeholder="Username"/>
  </div>

depending on your layout choice!

Hope this helps...

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85318

jQM Has another layout option, would this work?

HTML

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
        <label for="checkbox-6">b</label>

        <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
        <label for="checkbox-7"><em>i</em></label>

        <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
        <label for="checkbox-8">u</label>    
    </fieldset>
</div>

Docs:

Horizontal toggle sets
Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the data-type="horizontal" to the fieldset.

<fieldset data-role="controlgroup" data-type="horizontal"> The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.

Upvotes: 1

Related Questions