views:

43

answers:

2

Hi,

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?

+2  A: 

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.

Nick Craver
Thanks! But after the page is loaded the radiobuttons should be checked in some cases maby the divEndDate should be hidden from start, maby the user have made an post to the service that was not correct and it is comming back with the TypeOfAd_Ad and if so then the divEndDate should be hidden.
SnowJim
@SnowJim - Add a `.change()` on the end to trigger the handler immediately as well, so that last line should look like: `}).change();`
Nick Craver
Thanks! That solved the problem.
SnowJim
@SnowJim - Welcome :) And welcome to SO!
Nick Craver
A: 

try the following

$(document).ready(function () { 
  $('input:radio[name="ModelViewAd.TypeOfAd.SelectedValue"]').click(function() {
    this.id == 'ModelViewAd.TypeOfAd_Ad'?
      $("#divEndDate").show() : $("#divEndDate").hide();

  });
});

We bind the same click event handler to both radio inputs and then check the id inside of the function. Depending on this id value we either show or hide the <div> with the end date.

Here's a Working Demo

Russ Cam
[`.toggle()`](http://api.jquery.com/toggle/) :)
Nick Craver
Or `toggle()` :) I personally prefer to explicitly set show or hide and control the visibility explicitly. I remember having some issues with `toggle()` some time back using 1.2.X and have generally avoided it since.
Russ Cam
@Russ - `.toggle()` takes a bool, it is explicit...
Nick Craver
Thanks! But after the page is loaded the radiobuttons should be checked in some cases maby the divEndDate should be hidden from start, maby the user have made an post to the service that was not correct and it is comming back with the TypeOfAd_Ad and if so then the divEndDate should be hidden.
SnowJim