How to display different messages when clicking on two different radio button in javascript?

webdev from

I have two radio buttons as shown below :

<input type="radio" name="country" value="India" class="website">India
<input type="radio" name="country" value="UAE" class="website">UAE

I have written the jquery for this :

 $("input[type='radio']").click(function () {
        var selection=$(this).val();
        alert("Radio button selection changed. Selected: "+selection);
    });

But this is only working when the first radio button is clicked. It wont work when the second radio button is clicked.

Can anyone help me out in this ?

javascript jquery html

Answers

answered 2 months ago Get Off My Lawn #1

When a form element is disabled you cannot trigger click events on the element. However, you can put a non-form element such as a span around each input and add the click event to the span if you would like.

Note: Using a label calls the click twice which is why I didn't use it.

$("span").click(function() {
  var selection = $(this).children().first().val();
  alert("Radio button selection changed. Selected: " + selection);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><input type="radio" name="country" value="India" class="website">India</span>
<span><input type="radio" name="country" value="UAE" class="website" disabled="disabled">UAE</span>