Question 37353 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery: enable element on radio check

jQuery function isnt enabling my disabled submit button?

$(document).ready(function() {
      if ($("#lawfulBasis").prop("checked")) {
         $("#submitBtn").prop('disabled', false);   
       alert('Button Clicked');           
      };    
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>

</head>
<body>
<input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
<p>
<input id="submitBtn" type="submit" value="Submit" disabled/>
</p>

</body>

</html>
Tags:

3

Answers


  1. 0

    The issue is because you only read the state of the radio control in the document.ready handler, ie. when the page loads not when the user changes its state.

    To fix this attach a change event handler to the radio and set the disabled state of the button based on that.

    Finally, note that you should be using a checkbox for this, not a radio. The reason is that the radio cannot be deselected once selected for the first time.

    jQuery($ => {
  $("#lawfulBasis").on('change', e => {
    $("#submitBtn").prop('disabled', !e.target.checked);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>
  <input id="lawfulBasis" type="checkbox" value="3" /> 
  I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
</label>
<p>
  <input id="submitBtn" type="submit" value="Submit" disabled/>
</p>
    Login or Signup to reply.
  2. 0

    I did think about writing this up in jQuery but really it’s just as easy to use vanilla js. Your problem was that you’re checking all this when the docuemnt loads, and not when the button is pressed.

    document.getElementById("lawfulBasis").addEventListener("change", () => {
  const radio = document.getElementById("lawfulBasis");
  if (radio.checked) {
    document.getElementById("submitBtn").disabled = false;
  }
});
    <input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
<p>
  <input id="submitBtn" type="submit" value="Submit" disabled/>
</p>
    Login or Signup to reply.
  3. 0

    You need an eventlistner: $('#lawfulBasis').change()

    $(document).ready(function() {
  $('#lawfulBasis').change(function() {
    if ($(this).prop("checked")) {
      $("#submitBtn").prop('disabled', false);   
      alert('Button Clicked');           
    }  
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>

</head>
<body>
<input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
<p>
<input id="submitBtn" type="submit" value="Submit" disabled/>
</p>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search