Change the color of the radio button on the click with several colors

advertisements

I'm trying to create Yes/No buttons which have a default state of null, and when pressed, yes goes green, and no goes red.

Here is an example of the code:

<label class="formheading">Apparatus group is correct</label>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" class="right">
    <input type="radio" name="q2" id="q2y" value="Yes">
    <label for="q2y">Yes</label>
    <input type="radio" name="q2" id="q2n" value="No">
    <label for="q2n">No</label>
</fieldset>

Here is my jsfiddle - as you can see I've only managed to change the button to green for all buttons... but what I'd like is for No to become red once pressed.

I've found some similar solutions, however none seem to work with JQM 1.4.2


You can add class .no to "No" label:

<label for="q2n" class="no">No</label>

and add this rule:

.myform .ui-btn-active.no {
    background-color: red !important;
    border-color: crimson !important;
    color: #fff !important;
    text-shadow: none !important;
}

This would allow you to have more buttons in future if you need.

Demo: http://jsfiddle.net/ambvdznb/6/