CODEWITHSUNDEEP
jqueryradio-button
user1967599
user1967599

Reputation:

jQuery - Do not run code again if radio button was already selected

I have this simple code below. There are two radio buttons. If you click on one of them, it will execute a code that will print into "object_type". In my real program the click runs many lines of code and loads a map. If the radio button was previously already selected and I click it again, I do not want the code to run again. How can I accomplish that? 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#r1,#r2").on("click", function(){
      var radiovalue = $('input[name=tt1]:checked').val();
      $('#object_type').html(radiovalue);
   });
});
</script>
<div class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</div>
<div class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</div>
<div id="object_type"></div>​

Upvotes: 1

Views: 550

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Why don't you simply target the radio buttons and use the change event?

http://jsfiddle.net/bppLxmxz/

as you can see the alert will not yield if already checked cause the change event will not trigger.

Note that if you need a larger area to harvest the click than you might want to use <label> element instead of your current <div>. 

$(function(){

  $("[name=tt1]").change(function(){
      var radiovalue = $('input[name=tt1]:checked').val();
      alert("First time checked!");
      $('#object_type').html(radiovalue);
   });

});

<label class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</label>
<label class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</label>
<div id="object_type"></div>

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

You can store the id of the last click radio in #object_type and use an if statement to check and compare the value before executing the code.

$(document).ready(function(){
  $("#r1,#r2").on("click", function(){
    if( !$(this).is( $('#object_type').data('last-click') ) ) {
      var radiovalue = $('input[name=tt1]:checked').val();
      $('#object_type').html(radiovalue)
      .data('last-click', '#' + this.id);
    } else {
      alert( 'Was the last one clicked' ); //just for demo:: else clause is not required
    }
   });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</div>
<div class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</div>
<div id="object_type"></div>​

Upvotes: 0

Kolban
Kolban

Reputation: 15266

When an event handler is added to an element it can also be removed using the jQuery .off() function. In my solution to your puzzle, I detect which entry caused the click event and then switch off the event handler for that element so that it will not happen again. Here is the code I used followed by a jsFiddle example:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#r1,#r2").on("click", function(event){
        var radiovalue = $('input[name=tt1]:checked').val();
        $('#object_type').html(radiovalue);
        $(event.currentTarget).off("click");
   });
});
</script>
<div class='mi' id='r1'><input type="radio" name="tt1" value="1" id="radio_1">One</div>
<div class='mi' id='r2'><input type="radio" name="tt1" value="2" id="radio_2">Two</div>
<div id="object_type"></div>

jsFiddle Example

Upvotes: 0

Related Questions