Question

可以选择所有单选按钮。但我想允许用户只选择一个单选按钮。

这是HTML代码。

$jsqla = mysql_query("select * from products where id='$product_id'") or die(mysql_error());
$jfeta = mysql_fetch_assoc($jsqla);

$formats = explode(";", $jfeta['formats']);

<div class="">
    <?php foreach($formats as $v){ ?>
        <label style="line-height: 1.25em;display: block;width: 100px;margin-right: 10px;float: left;">                         
            <div id="format-id_<?php echo $v?>" style="border: 1px solid;border-radius: 9px;text-align: center;padding-top: 10px;padding-bottom:10px;padding-left: 3px;padding-right: 3px;border-color: #cccccc;font-family: 'SSemibold'; font-size: 13px; color: #44b7da;">                                
                <input type="radio" value="<?php echo $v; ?>" name="abc" style="visibility:hidden;" id="<?php echo $v ?>" onClick="changeColour(this)"/>
                <span style="margin:-17px auto auto 0px;display:block;"><?php echo $v; ?></span>                            
            </div>                      
        </label>
    <?php } ?>      
</div>

这是JavaScript代码。

<script type="text/javascript">
    function changeColour(raid) {
        var raid1 = raid.id;
        document.getElementById("format-id_"+raid1).style.backgroundColor = "#cccccc";
    }                           
</script>

Answer 1

$(document).ready(function(e) {
   $(':radio').bind('change',function(){
    var th = $(this), id = th.attr('id'); 
    //alert(th);
   if(th.is(':checked')){
     $(':radio[id="'  + id + '"]').not($(this)).attr('disabled',true);   
   }
   else
   {
      $(':radio[id="'  + id + '"]').not($(this)).attr('disabled',false);  
   }
  });
});

DEMO

Answer 2

如果我理解你的问题（也许我没有），你希望用户选择一个单选按钮，然后禁用该组中的所有其他按钮。如果是这种情况，以下工作就完成了。

它获取所有具有相同名称的单选按钮，并禁用未检查的按钮：

function changeColour(raid) {
  var button, buttons = document.getElementsByName(raid.name);

  for (var i=0, iLen=buttons.length; i<iLen; i++) {
    button = buttons[i];

    if (!button.checked) {
      button.disabled = true;
      button.style.backgroundColor = "#cccccc";
    }
  }
}

如果您只是想禁用它们，那么：

function changeColour(raid) {
  var buttons = document.getElementsByName(raid.name);

  for (var i=0, iLen=buttons.length; i<iLen; i++) {
    buttons[i].disabled = !buttons[i].checked;
  }
}

Answer 3

我不知道为什么但是因为你的div而发生了

<div id="format-id" .......>

尝试这样的事情：

 <div>
        <?php for($i=0;$i<10;$i++){ ?>
                    <input type="radio" value="<?php echo $i; ?>" name="abc"  id="<?php echo $i ?>" onClick="javascript:changeColour(this)"/>
                    <span style="margin:-2px auto auto 0px;display:block;"><?php echo $i; ?></span>                            
               <?php } ?>  
    </div>

Answer 4

我不确定我是否理解正确，但您可以在每个单选按钮上轻松完成以下操作。这样只能激活一个按钮。那就是你使用bootstrap。

 <input type="radio" data-toggle="button" >

与工作小提琴：http://jsfiddle.net/8xrhr93g/

如何一次只选择一个单选按钮，当数据来自数据库时，在javascript中取消选择其他单选按钮？

4 个答案: