Question

How can I add a text box beside the label for checkbox using jquery mobile? It should be in one line (checkbox –> label (for checkbox) –> textbox)

Answer 1

If you want to add a label in the same line as its referencing element, like for example:

My legend [ ] Checkbox label

you may want to try using field containers, with data-role="fieldcontain".

For example:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Agree to the terms:</legend>
        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
        <label for="checkbox-2">I agree</label>
    </fieldset>
</div>

The code above will give you:

Agree to the terms: [] I agree

Check the online doc for more information: http://jquerymobile.com/demos/1.1.1/docs/forms/checkboxes/

---

Now, if you want to several elements on one line (= several elements in different columns), I mean more than just a label and its element, you may wanna check the jQuery Mobile’s Layout grids: http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html

---

Considering your example case, I think you may want to try to use a combination of the 2 methods above. So, you may try something like this:

<div class="ui-grid-a">

    <!-- FIRST COLUMN -->
    <div class="ui-block-a">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Agree to the terms:</legend>
                <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
                <label for="checkbox-2">I agree</label>
            </fieldset>
        </div>
    </div>

    <!-- SECOND COLUMN -->
    <div class="ui-block-b">
        <input type="text"/>
    </div>

</div>

Hope this helps.