0

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 に答える