CODEWITHSUNDEEP
jquerycheckbox
John
John

Reputation: 171

Only one checkbox to be checked at time

Well may be is easy but how can I make only one checkbox to be checked at time? Here is my checkboxes

<label class="checkbox-inline">
      <input type="checkbox" name="skills" id="radio" value="1"> 1
</label>
<label class="checkbox-inline">
      <input type="checkbox" name="skills" value="2"> 2
</label>
<label class="checkbox-inline">
      <input type="checkbox" name="skills" value="3"> 3
</label>

And JS that I use for the animation on them

$(function() {

$('input[type=checkbox]').each(function() {
    var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
    if ($(this).is(':checked')) {
        span.addClass('checked');
    }
    $(this).wrap(span).hide();
});

function doCheck() {
    if ($(this).hasClass('checked')) {
        $(this).removeClass('checked');
        $(this).children().prop("checked", false);
    } else {
        $(this).addClass('checked');
        $(this).children().prop("checked", true);
    }
}

function doDown() {
    $(this).addClass('clicked');
}

function doUp() {
    $(this).removeClass('clicked');
}
});

Currently I can check multiple checkboxes. Here is quick JSFIDDLE

Upvotes: 1

Views: 29856

Answers (4)

Md. Didarul Islam
Md. Didarul Islam

Reputation: 129

  $('input[name="skills"]').on('change', function () {
        $('input[name="skills"]').not(this).prop('checked', false);
    });

Upvotes: 0

Azad
Azad

Reputation: 5264

try this,

$(document).ready(function(){


  $('[type="checkbox"]').change(function(){
  
    if(this.checked){
       $('[type="checkbox"]').not(this).prop('checked', false);
    }    
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
  <input type="checkbox" name="skills" id="radio" value="1">1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="skills" value="2">2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="skills" value="3">3
</label>

Upvotes: 3

Shubham Khatri
Shubham Khatri

Reputation: 281676

You can use this code if want to persist using checkboxes otherwise its better to use radio button instead HTML

<label class="checkbox-inline check">
      <input type="checkbox" name="skills" id="radio" value="1"> 1
</label>
<label class="checkbox-inline check">
      <input type="checkbox" name="skills" value="2"> 2
</label>
<label class="checkbox-inline check">
      <input type="checkbox" name="skills" value="3"> 3
</label>

JS:

$('.check input:checkbox').click(function() {
    $('.check input:checkbox').not(this).prop('checked', false);
});

Check this jsfiddle for the demo

Upvotes: 4

user1994997
user1994997

Reputation: 

<input type="radio" />

Change your input to radio and edit the css for them to be square if you really want the checkbox style. You can totally get it running with a javascript controlling how many are ticked, etc, etc, but if it already exists, there's no point in not using it / creating it from scratch ;)

For unchecking radios: http://jsfiddle.net/6Mkde/

Upvotes: 2

Related Questions