How to select only one radio button at one time and deselect the others in javascript when the data are comes from database?

Question

All radio buttons can be selected. But I want to give permission to the user to select only one radio button.

Here is the HTML code.

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

Here is the JavaScript code.

<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

If I understand your question (and maybe I don't) you want the user to select one radio button, then disable all the others in the group. If that's the case, the following does the job.

It gets all the radio buttons with the same name and disables the ones that aren't checked:

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";
    }
  }
}  

If you just want to disable them, then:

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

i'm not sure why but it is happening because of your div

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

try something like this:

 <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

I'm not really sure if I understand correctly but you can easely do the following on each radio button. That way only one button can get activated. That is if you're using bootstrap.

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

with working fiddle: http://jsfiddle.net/8xrhr93g/