CODEWITHSUNDEEP
javascriptjquery
ST80
ST80

Reputation: 3903

Jquery how to disable submit button until radio button and checkbox has been checked

I have a submit button which is disabled by default. Now I have two radio buttons and a checkbox and the submit button is only allowed to be enabled when one of the radio buttons has been checked AND the checkbox has been checked.

Right now, I can simply check the checkbox and the submit button is enabled.

<div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

and the JS:

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"]').on("click", function() {
  $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
});

I made an jsfiddle for it.

So, how can I achieve that?

Upvotes: 0

Views: 1231

Answers (3)

Rohit Utekar
Rohit Utekar

Reputation: 848

Create one common function to validate all checkboxes and radio button.

Check below sample.

$('button[type="submit"]').prop("disabled", true);

$('#check1, #check2, input[name="test"]').on("change", function() {
  validate();
});

function validate() {
   var valid = true;
   
   if(!$('[name="radio"]:checked').val()) {
      valid = false;
   }
   if(!$('[name="test"]').prop('checked')) {
      valid = false;
   }
   $('button[type="submit"]').prop("disabled", !valid)
}
#terms {
  margin-top: 15px;
}

#btn {
  margin-top: 15px;
  background: red;
  padding: 5px;
  border: 0;
}

#btn::disabled {
  background: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="check1">
    <input type="radio" name="radio" id="check1" value="1">Value 1
  </label>
  
    <label for="check2">
    <input type="radio" name="radio" id="check2" value="2">Value 2
  </label>
</div>

<div id="terms">
  <input type="checkbox" name="test" value="1">Check
</div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

You can check the length of checked radio button:

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"], input[name="radio"]').on("click", function() {
  if($('input[name="radio"]:checked').length){
    $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

Upvotes: 2

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

Add an onclick on both of them, and and if statement inside :

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"], input[name=radio]').on("click", function() {
  if ($('input[name=radio]:checked').length > 0) {
    $('button[type="submit"]').prop(
      "disabled", !$('input[name="test"]').prop("checked")
    );
  }
});
#terms {
  margin-top: 15px;
}

#btn {
  margin-top: 15px;
  background: red;
  padding: 5px;
  border: 0;
}

#btn::disabled {
  background: lightgrey;
}
<div>
  <label for="check1">
    <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
    <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
  <input type="checkbox" name="test" value="1">Check
</div>

<div>
  <button type="submit" id="btn">Send</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

https://jsfiddle.net/wxq0Lr5n/

Upvotes: 0

Related Questions