我如何禁用和启用输入类型提交，一旦我检查了一个输入类型单选

您发布的代码的问题是，您运行脚本时，页面加载，在这一点上有& &;在你的演示中没有选定的无线电输入。要使该代码工作，您只需要将其包装在无线电<input>元素的change事件的事件处理程序中:

// 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.

要处理多组无线电输入，一种低效的方法是简单地使用额外的类，在选择器中指定组名来识别这些组。

这种方法效率很低，因为您需要提前知道每组元素的标识符，以及将有多少个元素(因为您最初硬编码了一些必须在if语句中检查的元素)。

$('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>

因此，为了避免这种低效率，我们都希望代码本身能够给定一个简单的选择器，如$('input[type=radio]')，确定有多少组，因此必须检查多少元素才能满足"每组检查一个"的标准。

幸运的是，下面的代码就是这样做的:

// 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.

具有:

• CSS:
  • :checked伪类
• JavaScript:
  • Array.prototype.forEach() .
  • 条件(三元)运算符。
• jQuery:
  • change() .
  • Filter() .
  • get() .
  • map() .
  • on() .
  • prop() .

看到更新的小提琴

$(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;
}
})
});

您可以使用此代码获取选定类型，

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