Question

I have the following radiobuttons rendered in MVC :

<div class="radio" id="ModelViewAd.TypeOfAd">
 <input checked="checked" id="ModelViewAd.TypeOfAd_Ad" name="ModelViewAd.TypeOfAd.SelectedValue" type="radio" value="Ad" />
 <label for="ModelViewAd.TypeOfAd_Ad">Annons</label><br>
 <input id="ModelViewAd.TypeOfAd_Auktion" name="ModelViewAd.TypeOfAd.SelectedValue" type="radio" value="Auktion" />
 <label for="ModelViewAd.TypeOfAd_Auktion">Auktion</label><br>
</div>

Now I need to hide the id=divEndDate element based on the value on the radiogroup.

I have tried this :

$(document).ready(function () {

        $("#TypeOfAd_Auktion").click(function () {
            if ($(this).checked) {
                $("divEndDate").css("visibility", "visible");
            }
            else {
                $("divEndDate").css("visibility", "hidden");
            }
        });

        $("#ModelViewAd.TypeOfAd_Ad").click(function () {
            if ($(this).checked) {
                $("divEndDate").css("visibility", "hidden");
            }
            else {
                $("divEndDate").css("visibility", "visible");
            }
        });
    });

Now one of these are triggered when switching between the radio buttons? How to solve this?

Answer 1

You need a few corrections:

$("#TypeOfAd_Auktion")
//should be:
$("#ModelViewAd\\.TypeOfAd_Auktion")

$(this).checked
//should be:
this.checked

$("#ModelViewAd.TypeOfAd_Ad")
//should be:
$("#ModelViewAd\\.TypeOfAd_Ad")

And this:

$("divEndDate")
//should be:
$("#divEndDate")

When using a . in an ID, it needs to be escaped so it’s not treated as a class, like this: \\. Also, unless you need visibility for occupying space in the page even when hidden, use display instead, then you can shorten the code to this:

$("#ModelViewAd\\.TypeOfAd :radio").change(function () {
    $("#divEndDate").toggle(this.checked && this.value == 'Ad');
});

You can view a demo here, this includes no change to your HTML, just the script.