How do I disable and enable back the input type submit, once I have checked one input type radio?

Question

I hope the title says everything. I have a form, with lots of groups of input type radio, and I want the input type submit button to be disabled UNTIL one input type radio from each group has been checked. This example is just one group of input type radio, but it doesn't work obviously. What am I missing?

https://jsfiddle.net/Suiberu/70tkgk5t/

var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton'); 
sbmtBtn.disabled = true;

if (current.length > 0){
sbmtBtn.disabled = false; 
}
else{
sbmtBtn.disabled = true;
}

thanks!

Answer 1

The problem with your posted code is that you run the script when the page loads, at which point there are – in your demo – no selected radio-inputs. To make that code work you'd simply need to wrap it in an event-handler for the change event of the radio <input> elements:

// binds the anonymous function of the on() method to act
// as the event-handler for the 'change' event triggered
// on the <input> elements of type=radio:
$('input[type=radio]').on('change', function() {

  var current = $('input.class_x').filter(':checked');
  var sbmtBtn = document.getElementById('SubmitButton');
  sbmtBtn.disabled = true;

  if (current.length > 0) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }

// fires the 'change' event when the script is
// first run, which sets the disabled property
// of the submit-button appropriately:
}).change();

$('input[type=radio]').on('change', function() {

  var current = $('input.class_x').filter(':checked');
  var sbmtBtn = document.getElementById('SubmitButton');
  sbmtBtn.disabled = true;

  if (current.length > 0) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }

}).change();

input {
  display: block;
  margin: 0.5em 0;
}
input[type='submit']:disabled {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
  <input class="class_x" type="radio" name="name_x" value="value_1" id="id_1" />
  <input class="class_x" type="radio" name="name_x" value="value_2" id="id_2" />
  <input class="class_x" type="radio" name="name_x" value="value_3" id="id_3" />
  <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>

JS Fiddle demo.

To work with multiple groups of radio-inputs one, inefficient, approach is to simply use either additional classes, specify the group names, in the selector to identify those groups.

This approach is inefficient simply because you need to know in advance the identifiers for each group of elements, and how many there will be (since you originally hard-coded a number of elements that must be checked in your if statement).

$('input[type=radio]').on('change', function() {

  var current = $('input.class_x, input.class_y, input.class_z').filter(':checked');
  var sbmtBtn = document.getElementById('SubmitButton');
  sbmtBtn.disabled = true;

  if (current.length > 2) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }

}).change();

input {
  display: block;
  margin: 0.5em 0;
}
input[type='submit']:disabled {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
  <fieldset>
    <input class="class_x" type="radio" name="name_x" value="value_1" />
    <input class="class_x" type="radio" name="name_x" value="value_2" />
    <input class="class_x" type="radio" name="name_x" value="value_3" />
  </fieldset>
  <fieldset>
    <input class="class_y" type="radio" name="name_y" value="value_1" />
    <input class="class_y" type="radio" name="name_y" value="value_2" />
    <input class="class_y" type="radio" name="name_y" value="value_3" />
  </fieldset>
  <fieldset>
    <input class="class_z" type="radio" name="name_z" value="value_1" />
    <input class="class_z" type="radio" name="name_z" value="value_2" />
    <input class="class_z" type="radio" name="name_z" value="value_3" />
  </fieldset>

  <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>

So, to avoid that inefficiency we'd all prefer it if the code itself could, given a simple selector such as $('input[type=radio]'), determine how many groups there are, and therefore how many elements must be checked to meet the criteria of 'one checked in every group.'

Luckily, the following code does just that:

// we need to use this collection within the event-handler,
// so we're caching it here:
var allRadios = $('input[type=radio]');

// binding the anonymous function as the event-handler for
// the 'change' event, as before:
allRadios.on('change', function() {

  // retrieving the names of all radio-inputs on the page,
  // using map(): 
  var groups = allRadios.map(function() {

      // returning the 'name' property of each of the
      // radio-inputs to the created map:
      return this.name;

    // converting the map into an Array:
    }).get(),

    // creating an empty Array to hold the unique
    // group-names:
    uniqueGroupNames = [];

  // iterating over the groups Array using the
  // Array.prototype.forEach() method:
  groups.forEach(function(name) {
    // 'name' is a reference to the current Array-element
    //        of the Array over which we're iterating.

    // the name (the current Array-element) is not found
    // within the uniqueGroupNames Array:
    if (uniqueGroupNames.indexOf(name) === -1) {

      // then we add it to that Array:
      uniqueGroupNames.push(name)
    }
  });

  // here we find the submit-button, and use the prop()
  // method to set its 'disabled' property, using a 
  // conditional (ternary) operator:
  $('input[type=submit]').prop('disabled',

    // we find the number of checked radio-inputs and if
    // that number is less than the number of unique group
    // names the condition evaluates to true and the disabled
    // property is sset to true; if the number of checked
    // radio-inputs is not less-than the number of group names,
    // the condition is false, and the disabled property is set
    // to false:
    allRadios.filter(':checked').length < uniqueGroupNames.length
  );

}).change();

var allRadios = $('input[type=radio]');

allRadios.on('change', function() {
  var groups = allRadios.map(function() {
      return this.name;
    }).get(),
    uniqueGroupNames = [];
  groups.forEach(function(name) {
    if (uniqueGroupNames.indexOf(name) === -1) {
      uniqueGroupNames.push(name)
    }
  });

  $('input[type=submit]').prop('disabled', allRadios.filter(':checked').length < uniqueGroupNames.length);

}).change();

input {
  display: block;
  margin: 0.5em 0;
}
input[type='submit']:disabled {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
  <fieldset>
    <input class="class_x" type="radio" name="name_x" value="value_1" />
    <input class="class_x" type="radio" name="name_x" value="value_2" />
    <input class="class_x" type="radio" name="name_x" value="value_3" />
  </fieldset>
  <fieldset>
    <input class="class_y" type="radio" name="name_y" value="value_1" />
    <input class="class_y" type="radio" name="name_y" value="value_2" />
    <input class="class_y" type="radio" name="name_y" value="value_3" />
  </fieldset>
  <fieldset>
    <input class="class_z" type="radio" name="name_z" value="value_1" />
    <input class="class_z" type="radio" name="name_z" value="value_2" />
    <input class="class_z" type="radio" name="name_z" value="value_3" />
  </fieldset>

  <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>

JS Fiddle demo.

Refrences:

• CSS:
  • :checked pseudo-class.
• JavaScript:
  • Array.prototype.forEach().
  • Conditional (ternary) Operator.
• jQuery:
  • change().
  • Filter().
  • get().
  • map().
  • on().
  • prop().

Answer 2

see updated fiddle

$(document).ready(function () {
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
$('.class_x').click(function (){
if ($('.class_x').is(':checked')){//if only allow any on of the radio checked
sbmtBtn.disabled= false; 
}
else{
sbmtBtn.disabled = true;
}
})
});

Answer 3

You Can use this code for get selected type,

 $('#check_id').on('change', '[name=cust_check]', function() {
    checkValues = $('input[name=cust_check]:checked').map(function()
    {
        return $(this).attr('value');
    }).get();
});