jQuery: make checkboxes act like radio buttons?

Question

Is there a way to make checkboxes act like radio buttons? I assume this could be done with jQuery?

Answer 1

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).attr("checked",false);
    $(this).attr("checked",true);
});

This will do it, although i do agree this might be a bad idea.

Online example: http://jsfiddle.net/m5EuS/1/

UPDATE added group separation.

Answer 2

Updated for Jquery 1.9 - use .prop() instead of .attr()

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).prop("name")+"']";
    $(group).prop("checked",false);
    $(this).prop("checked",true);
});

Here is an example: http://jsfiddle.net/m5EuS/585/

Answer 3

I updated the Fiddle script, jQuery was missing. Now with prop and attr (use both).

$('form').each(function() { // iterate forms
  var $this = $(this);
  $this.find('input:checkbox').click(function() {
    var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
    $this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change
    $(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change
  });
});

Fiddle

Answer 4

If you apply class to the checkbox, you can easily achieve the radio button functionality using the following piece of code:

$(".make_radio").click(function(){
    $(".make_radio").not(this).attr("checked",false); 
});

Answer 5

The solution given doesn't care about the initial state, which is different from the radio buttons behavior. Plus, it also triggers a change event when clicking on an already checked input.

var $elements = $('input:checkbox');

// Allow only one input to be selected
$elements.filter(':checked:not(:last)').prop('checked', false);

// Get selected input
var selected = $elements.filter(':checked')[0] || {};

// Handle event
$(document).on('click', 'input:checkbox', function(e) {
  if (e.currentTarget === selected) {
    e.preventDefault(); 
  } else {
    selected.checked = false;
    selected = e.currentTarget;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" value="0" /> test 0</label>
<label><input type="checkbox" value="1" checked /> test 1</label>
<label><input type="checkbox" value="2" checked /> test 2</label>
<label><input type="checkbox" value="3" /> test 3</label>

I also agree that doing that is a bad idea, but if you have a different name for each input (and can't change them), there is no other choice...