0

如果检查了 MAX 值，如何禁用一组单选按钮？在我的示例中，我希望允许检查 MAX 的 2 个单选按钮，并在检查 2 个时禁用其余的。

<script type="text/javascript">
    $(document).ready(function()
    {
        var MAX=2;              
    });
</script>

<form>
<div>
<ul>
    <li><input type="radio" class="rbutton"  name="radio[]" value="1" /></li>
    <li><input type="radio" class="rbutton"  name="radio[]" value="2" /></li>
    <li><input type="radio" class="rbutton"  name="radio[]" value="3"/></li>
    <li><input type="radio" class="rbutton"  name="radio[]" value="4" /></li>
</ul>
</div>
</form>
4

5 回答 5

3

您应该改用复选框

HTML

<ul>
    <li><input type="checkbox" class="rbutton"  name="radio[]" value="1" /></li>
    <li><input type="checkbox" class="rbutton"  name="radio[]" value="2" /></li>
    <li><input type="checkbox" class="rbutton"  name="radio[]" value="3"/></li>
    <li><input type="checkbox" class="rbutton"  name="radio[]" value="4" /></li>
</ul>​

脚本

$(function() {
    var $inputs = $('input.rbutton');
    $inputs.change(function() {
        if ($('input.rbutton:checked').length == 2) {
            $inputs.not(':checked').prop('disabled', true);
        } else {
            $inputs.prop('disabled', false);
        }
    });
});​

http://jsfiddle.net/D2QgX/

实际上这里是你如何在没有 if/else 语句的情况下做到这一点

$(function() {
    var $inputs = $('input.rbutton');
    $inputs.change(function() {       
           $inputs.not(':checked').prop('disabled', $('input.rbutton:checked').length == 2);       
    });
});​
于 2012-09-20T20:45:56.617 回答
2

试试这个jsFiddle 例子

var MAX = 2;
$('input.rbutton').click(function() {
    ($('input.rbutton:checked').length == MAX) ? $('input.rbutton').not(':checked').attr('disabled',true):$('input.rbutton').not(':checked').attr('disabled',false);
});​
于 2012-09-20T20:45:17.627 回答
1

确保将类型更改为type="checkbox"要禁用按钮，只需将 disabled 属性添加到元素。这段代码可以解决问题。

MAX = 2;

$('.rbutton').click(function(){
  var checked = [];
  $('.rbutton').each(function(){
    $(this).removeAttr('disabled');
    if($(this).is(':checked'))
      checked.push(this);
    });
  if(checked.length == MAX)
    $('.rbutton').each(function(){
      if($.inArray(this, checked) == -1)
          $(this).attr({disabled:'disabled'});
      });
});​

任何时候选中一个复选框，它都会计算所有选中的复选框，如果该计数等于最大值，它将禁用所有复选框。它还允许您取消选中并重新启用它们。看到它在这里工作。

于 2012-09-20T20:40:47.803 回答
0

您将需要复选框，而不是单选按钮。但是，一旦您拥有名为“checkbox[]”的复选框，这应该会有所帮助：

var $inputs = $('form input[type="checkbox"][name="checkbox\\[\\]"]');
$inputs.click(function()
{
    if ($inputs.filter('*:checked').length >= MAX)
    {   $inputs.attr('disabled','disabled'); }
    else
    {   $inputs.removeAttr('disabled');      }
});
于 2012-09-20T20:34:55.950 回答
0

提供相同的名称实际上会搞砸它，因为您不能选择多个具有相同名称的单选按钮..尝试为您的单选按钮提供不同的名称..或者完全使用复选框..

 <li><input type="radio" class="rbutton"  name="radio[1]" value="1" /></li>
    <li><input type="radio" class="rbutton"  name="radio[2]" value="2" /></li>
    <li><input type="radio" class="rbutton"  name="radio[3]" value="3"/></li>
    <li><input type="radio" class="rbutton"  name="radio[4]" value="4" /></li>
于 2012-09-20T20:37:59.143 回答