CODEWITHSUNDEEP
jqueryjquery-mobile
S.Gia
S.Gia

Reputation: 336

Jquery Mobile, Removing selected style from a checkbox group item

This has been driving me crazy. I have a horizontal fieldset controlgroup of radio buttons. I can check and uncheck these programatically, that is well documented. What I find, is that when I uncheck via jquery, the box isn't selected, but there is still a drop shadow around it which is confusing.

Using: Jquery Mobile 1.4.5, Jquery 1.11.1, libraries: fastclick and iscroll

Here is my html: 

    <fieldset data-role="controlgroup" data-type="horizontal" style="text-align:center;width:100%;" class="radioSet">

        <input type="radio" name="answers" id="answerA" value="A" class="answerRadio">
        <label for="answerA" class="cbLabel">A</label>

        <input type="radio" name="answers" id="answerB" value="B" class="answerRadio">
        <label for="answerB" class="cbLabel">B</label>

        <input type="radio" name="answers" id="answerC" value="C" class="answerRadio">
        <label for="answerC" class="cbLabel">C</label>

        <input type="radio" name="answers" id="answerD" value="D" class="answerRadio">
        <label for="answerD" class="cbLabel">D</label>
</fieldset>

Here is how the item looks when selected, as expected:

normal selection

and here is the artifact I am referring to, after deselecting via Jquery:

after programatic deselect

The JS I am using to de-select is this:

$(".answerRadio").prop('checked', false).checkboxradio('refresh');

I just want to get rid of that pesky background shadow thing but I cannot find the class or element to manipulate to get rid of it.

Any help is appreciated.

Upvotes: 0

Views: 114

Answers (1)

KJ Tsanaktsidis
KJ Tsanaktsidis

Reputation: 1275

I suspect the box shadow is there because the element is still focused, and there is a :focus selector applying that style. Try defocusing the element as well after unchecking it:

$(".answerRadio").blur()

Upvotes: 1

Related Questions