CODEWITHSUNDEEP
twitter-bootstrapcheckboxdrop-down-menu
Amir
Amir

Reputation: 351

drop down inside check box bootstrap

I'm using bootstrap 2 and i want a drop down inside check box label like this.

<label class="checkbox">
    <input type="checkbox">
    i want to buy
    <select class="which">
        <option>1</option>
        <option>2</option>
    </select>
    something
</label>

i want clicking on 'something' change status of checkbox. it's cool in chrome, but in firefox the drop down doesn't work and clicking on it changes status of checkbox. i use'd stop propagation method but doesn't help. this way of using drop down and checkbox is true? Thanks

Upvotes: 0

Views: 593

Answers (2)

davidkonrad
davidkonrad

Reputation: 85558

It is illegal markup. Try validate the the above code. It will report "The label element may contain at most one input, button, select, textarea, or keygen descendant."

You have two inputs. Seems FireFox renders this "correct", the select box as part of the label, triggering its parent, the label, when it is clicked.

I suggest you make valid markup, using two labels :

<label class="checkbox">
    <input type="checkbox" id="check">
    i want to buy
</label>
<select class="which">
   <option>1</option>
   <option>2</option>
</select>
<label for="check">
    something
</label>

see fiddle -> http://jsfiddle.net/AbaZH/ works in FireFox (also)

Upvotes: 2

Amir
Amir

Reputation: 351

I used this solution:

<input type="checkbox" id="buyCheckbox">
<label class="checkbox" for="buyCheckbox">
     i want to buy
</label>
<select class="which">
    <option>1</option>
    <option>2</option>
</select>
<label class="checkbox" for="buyCheckbox">
     something
</label>

Upvotes: 1

Related Questions