Apply condition if radio button is unchecked-CodePudding

how to apply condition if radio button is unchecked. if #radio_button_id_1 is unchecked it shown confirmation confirm('You want domestic?'). If user clicked same radio button more than once it should not show confirm('You want domestic?') .

If user click radio button #radio_button_id_2 and again clicked #radio_button_id_1 than it should show the confirm('You want domestic?')

HTML:

<input  type="radio" id="#radio_button_id_1" name="shipping_information" 
        >
<label> Domestic <label>

<input  type="radio" id="#radio_button_id_2" 
        name="shipping_information" >
<label> internation<label>

My javascript

$(document).on('click', '#radio_button_id_1', function(event){
  // apply condition if radio button is already not checked/Clciked
   if (confirm('You want domestic?')) {
        
      } else {
        event.preventDefault();
      }

 });

$(document).on('click', '#radio_button_id_2', function(event){
  // apply condition if radio button is already not checked/Clciked
   if (confirm('You want internation?')) {
        
      } else {
        event.preventDefault();
      }

 });

CodePudding user response：

You can add and remove class base on your click.

$(document).on('click', '#radio_button_id', function(event){
  // apply condition if it not click more one time
if(('#radio_button_id').hasClass( "I-allready-clicked" )){
//do you stuff here
// remove the class for the next time
    ('#radio_button_id').removeClass("I-allready-clicked");
}else{
     ('#radio_button_id').addClass("I-allready-clicked");
}
   if (confirm('Are you sure?')) {
        
      } else {
        event.preventDefault();
      }

 });

CodePudding user response：

What you could do is to set a an attribute on the button that will tell you if it has been clicked or not.

$(document).on('click', '#radio_button_id', function(event) {
  if ($(this).attr("clicked") == "true" ? false : true) {
    if (confirm('Are you sure?')) {
    } else {
      event.preventDefault();
    }
    $(this).attr("clicked", "true");
  }
});

Demo

$(document).on('click', '#radio_button_id', function(event) {
  if ($(this).attr("clicked") == "true" ? false : true) {
    if (confirm('Are you sure?')) {

    } else {
      event.preventDefault();
    }
    $(this).attr("clicked", "true");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<button id="radio_button_id">click me only once</button>

If you want to know how many time's it has been clicked you can use the same method.

$(document).on('click', '#radio_button_id', function(event) {
  var clicked = $(this).attr("clicked") == undefined ? 1 :  $(this).attr("clicked");
  if (confirm('Are you sure?')) {

  } else {
    event.preventDefault();
  }
  console.log("you have clicked the button "   clicked   " times")
  $(this).attr("clicked", (clicked   1));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<button id="radio_button_id">click me only once</button>

CodePudding user response：

You can use dataset of element, with jquery data() for saving state of input same as :

$(document).on("click", 'input:radio',function (e) {
    if ($(this).data("checked")) {
        $(this).prop("checked",false).data("checked", false);
    } else {
      let text = $(this).data('confirm')
      if (confirm(text)) {
        $('input:radio').data("checked", false);
        $(this).prop("checked", true).data("checked",true)
      } else {
        e.preventDefault()
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  type="radio" id="radio_button_id_1" name="shipping_information"  data-confirm="You want domestic">
<label> Domestic <label>

<input  type="radio" id="radio_button_id_2" name="shipping_information"  data-confirm="You want internation">
<label> internation<label>