0

I have three radio each one has name started with delivery_option and a submit button with css class continue. I want to test if a radio is checked the button must be enabled, otherwise it should be disabled.

i made the code below 

$(document).ready(function() {
  $('#checkout-delivery-step input:radio').each(function() {
    if ($("input:radio[name*='delivery_option']:checked").length != 0) {
      $('.continue').prop('disabled', false);
    } else {
      $('.continue').prop('disabled', true);
    }
  });
});

but it does not work, what was the issue?

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
presta dev
  • 19
  • 2
  • 11

2 Answers2

0

You are running the code only once. The code has to be run every time when the radio button is clicked or changed. So you need to use the following:

// Make this a function.
function checkProgress() {
  if ($("input:radio[name*='delivery_option']:checked").length != 0) {
    $('.continue').prop('disabled', false);
  } else {
    $('.continue').prop('disabled', true);
  }
}

$(function () {
  // Set the status once the doc loads.
  checkProgress();
  // Set it again when any of the radio buttons are clicked.
  $("input:radio[name*='delivery_option']").on("click change", checkProgress);
});

Snippet

// Make this a function.
function checkProgress() {
  if ($("input:radio[name*='delivery_option']:checked").length != 0) {
    $('.continue').prop('disabled', false);
  } else {
    $('.continue').prop('disabled', true);
  }
}

$(function () {
  // Set the status once the doc loads.
  checkProgress();
  // Set it again when any of the radio buttons are clicked.
  $("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Group 1</h3>

Option 1: <input type="radio" name="delivery_option_1" />
Option 2: <input type="radio" name="delivery_option_1" />
Option 3: <input type="radio" name="delivery_option_1" />

<h3>Group 2</h3>

Option 1: <input type="radio" name="delivery_option_2" />
Option 2: <input type="radio" name="delivery_option_2" />
Option 3: <input type="radio" name="delivery_option_2" />

<p>Submit?</p>

<input type="button" value="Submit" class="continue" disabled />
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

You can try something like this with removeAttr which will remove the attribute from any element which is already set.

Also, for the radio you can do this way, once it is clicked then you can enable the button because it doesn't provide a way to deselect it.

Finally, the name for elements can be the same if it is a group and only the id must be unique. Check here.

So, proper code will be

<label for="delivery_option1">Option1:</label><input type="radio" id="delivery_option1" name="delivery_option" />
<label for="delivery_option2">Option2:</label> <input type="radio" id="delivery_option2" name="delivery_option" />
<label for="delivery_option3">Option3:</label><input type="radio" id="delivery_option3" name="delivery_option" />


$(function(){

      $("input:radio[name*='delivery_option']").click(function(){
      
        $(".continue").removeAttr("disabled");
      
      });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Option1: <input type="radio" name="delivery_option1" />
Option2: <input type="radio" name="delivery_option2" />
Option3: <input type="radio" name="delivery_option3" />

<input type="button" value="Submit" class="continue" disabled />
Hary
  • 5,690
  • 7
  • 42
  • 79