lundi 16 novembre 2015

Find radio and checkbox name using surrounding labeltext with Jquery

I'm trying to accomplish the following with Jquery:

When the "No Top" radio-button is "checked" it should disable and "uncheck" any selection done in the Checkbox selection.

If the user select another radio-button option for example "Black Top", the Checkbox selection should be enabled again.

I'm trying to solve this problem but can't figure out how to find the correct radio-button or checkbox using the labels text (that's all I have to go on). I can't use the ID's because it renders with different names all the time.

Any ides?

Here is the code that my controls generate (which I cant modify):

<div class="option-box">
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_0" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="0" checked="checked" type="radio" />
            No Top
        </label>
    </div>
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_1" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="8" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4$1\',\'\')', 0)" type="radio" />
            Black Top
        </label>
    </div>
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_2" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="9" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4$2\',\'\')', 0)" type="radio" />
            White Top
        </label>
    </div>
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_3" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="10" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4$3\',\'\')', 0)" type="radio" />
            Silver Top
        </label>
    </div>
</div>

<div class="option-box">
    <div class="checkbox">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl04_KitComponent_10_0" name="ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$0" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$0\',\'\')', 0)" value="11" type="checkbox" />
            Backdoor
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl04_KitComponent_10_1" name="ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$1\',\'\')', 0)" value="12" type="checkbox" />
            Topdoor
        </label>
    </div>
</div>




Aucun commentaire:

Enregistrer un commentaire