CODEWITHSUNDEEP
jquerytwitter-bootstrap
Ris
Ris

Reputation: 1164

Select only one checkbox in bootstrap

I have few check boxes in different table rows with same class name. I want only one should be selected among them at a time. I am trying something like following but nothing working,

$('.sev_check').click(function() {

                $('.sev_check').not(this).prop('checked', false);
});

or,

$('.sev_check').click(function() {
    $cur=$(this).prop('checked');
    $(".sev_check").each(function(){ 
       $(this).prop('checked',false);
    })
    $(this).prop('checked', $cur);  
});

Here are how my checkboxes are aligned,

enter image description here

HTML,

<div class="checkbox text-center">
    <label class="form-checkbox form-icon">
        <input id="s_fac" type="checkbox" class="sev_check">
    </label>
</div>

Upvotes: 2

Views: 20245

Answers (3)

Rui
Rui

Reputation: 4886

You approach works fine, try the fiddle

$('.sev_check').click(function() {
    $('.sev_check').not(this).prop('checked', false);
});

Here's a fiddle showing it working: https://jsfiddle.net/ruidfigueiredo/h3kfj2n9/2/

Upvotes: 9

stark
stark

Reputation: 2256

EDIT : Start with all the checkboxes looking like they're disabled, once a checkbox is selected, it appears selected while the others appear disabled, when another checkbox is clicked that one appears selected while the others appear disabled using opacity values for the input elements.

Check my snippet below:

$(document).ready(function() {
  $('.sev_check').each(function() {
    $(this).addClass('unselected');
  });
  $('.sev_check').on('click', function() {
    $(this).toggleClass('unselected');
    $(this).toggleClass('selected');
    $('.sev_check').not(this).prop('checked', false);
    $('.sev_check').not(this).removeClass('selected');
    $('.sev_check').not(this).addClass('unselected');
  });
});
.selected {
  opacity: 1
}
.unselected {
  opacity: 0.5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox text-center">
  <table border="2">
    <tr>
      <td>Value 1</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 2</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 3</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 4</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
    <tr>
      <td>Value 5</td>
      <td>
        <input id="s_fac" type="checkbox" class="sev_check">
      </td>
    </tr>
  </table>
</div>

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42054

Your first approach works for me like you can see in the snippet, but you can use a different approach like:

$(function () {
   $('.sev_check').change(function(e) {
       e.preventDefault();
       $('.sev_check').not(this).prop('checked', false);
       $(this).prop('checked', true);
   });
});


$(function () {
  $('.sev_check').click(function(e) {
    $('.sev_check').not(this).prop('checked', false);
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
    <form role="form">
        <div class="checkbox text-center">
            <label class="form-checkbox form-icon" for="s_fac">
                <input id="s_fac" type="checkbox" class="sev_check">
            </label>
        </div>
        <div class="checkbox text-center">
            <label class="form-checkbox form-icon" for="s_fac1">
                <input id="s_fac1" type="checkbox" class="sev_check">
            </label>
        </div>
        <div class="checkbox text-center">
            <label class="form-checkbox form-icon" for="s_fac2">
                <input id="s_fac2" type="checkbox" class="sev_check">
            </label>
        </div>
    </form>
</div>

Upvotes: 5

Related Questions