enable dropdown on radio button select

Question

My radio buttons looks like this

<div id="removeModal-85934">
<input type="radio" name="AdsArchive[status]" checked="checked" value="1" id="AdsArchive_status-85934">

<input type="radio" name="AdsArchive[status]" value="2" id="AdsArchive_status2-85934">
</div>

when AdsArchive_status-85934 is checked, it should enable a dropdown menu with id media-85934 and vise versa

here is my javascript

Yii::app()->clientScript->registerScript("delete-modal-js".$model->id, "
        $( \"#removeModal-$model->id input[name=AdsArchive[status]]\").click(function() {
            var val = $( \"#removeModal-$model->id input[name=AdsArchive[status]]:checked\").val();
            if (val === 1) {
                $(\"#media-$model->id\").attr('disabled',false);
                $(\"#date_sold-$model->id\").attr('disabled',false);
            }
            else {
                $(\"#media-$model->id\").attr('disabled',true);
                $(\"#date_sold-$model->id\").attr('disabled',true);
            }

        });
    ");

i have multiple <div id="removeModal-85934"> in the same page. where 85934 is the id that changes. if possible i'd like a generic code for all the radio button so i don't have to add the $model->id in my jquery on click.

right now when i click on the radio, button the dropdown menu is neither enabled or disabled, any idea what i'm doing wrong here?

score 0 · Accepted Answer · edited May 23 '17 at 12:33

If I remember correctly attr, does not work in this.

You need to use prop (JSFiddle example).

Here is more about the difference: SO question concerning attr vs prop

As for simple code to do all, please check this JSFiddle.

I have made quite a lot changes, maybe too much?

The main difference is that you don't have to copy ID everywhere, just to data-id and tick boxes:

<div class="removeModal" data-id="<id>">
    <input type="radio" name="AdsArchive[<id>]" checked="checked" value="1"/>Yes<br/>
    <input type="radio" name="AdsArchive[<id>]" value="2"/>No<br/>
</div>

Edit: To avoid ".parent().parent().parent()" issue, you can use

$(this).parents('.the-parent-element')

That will search within parents of the given selector. For examples, check JQuery's documentation about .parents()

because of my html i had to change your code to `var id = $(this).parent().parent().parent().parent().parent().data('id');` is there away NOT to repeat `parent()` so many times? — user2636556, Apr 29 '15 at 00:56

enable dropdown on radio button select

1 Answers1