CODEWITHSUNDEEP
javascriptjquerycheckboxradio-button
Jaffa
Jaffa

Reputation: 37

Checkbox behave like radiobox javascript

I have a table that is dynamically created based on a number that is selected by a user from a dropdown. The table consists of 3 checkboxes. The maximum number of checkboxes that can be checked per row is 2.

Checkbox 2 and 3 behave like radio buttons (I know it would make my life easier to use just radio buttons but then the table doesn't look right as there is one checkbox and 2 radio buttons). If 2 is selected and then the user clicks on 3, then 2 would become unchecked.

I found this script here: http://jsfiddle.net/44Zfv/724/ which works perfectly but when I try to integrate it into my project it doesn't work.

I have created a fiddle here: https://jsfiddle.net/pcqravwj/1/ This demonstates the scenario. As you will see the checkboxes on row 0 are not dynamically created and both checkboxes cannot be checked. I have added the class .cbh to my dynamically created checkboxes on row 1. However, all 3 checkboxes can be checked but I do notice that if a checkbox in row 0 is checked it clears the checkboxes which have the same class in row 1.

This is the piece of code I am using to try and control the checkbox behavouir 

            $(".chb").prop('checked', false);
            $(this).prop('checked', true);
            console.log("test3")
        });

I just wondered if anyone could help me figure out what is happening here. As a newbie, the script looks like it should work and I am struggling to find the mistake.

Your help would be greatly appreciated.

Thanks!

Upvotes: 0

Views: 106

Answers (2)

hero24
hero24

Reputation: 139

You need to update the handlers in your refresh, so that they are applied to all of the checkboxes, so this:

$(".chb").change(function () {
    $(".chb").prop('checked', false);
    $(this).prop('checked', true);

Should also appear at the end of the refresh function, however the class match for elements, will apply to all of the checkboxes with a given class, so (if im not misunderstanding your intention), you should apply a different class for every row.

Upvotes: 0

OPTIMUS PRIME
OPTIMUS PRIME

Reputation: 1325

You can create custom checkboxes with CSS as well) With hidden radio-buttons.

var counter = 0;
$('.cb[type="radio"]').each(function( index ){
  $(this).attr('name', 'rad-' + counter );
  if( index % 2 ) counter++;
}); // only auto-naming with JS, for demo.
.block { border: 2px solid orange; margin: 5px; padding: 5px; }

.cb { display: none; }

label {
  display: inline-block;
  width: 100px;
  box-shadow: 1px 1px 3px #666;
  padding: 5px; margin: 5px;
  cursor: pointer;
  user-select: none;
}

label:hover { background-color: #fff1ba; }

.box {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  background-color: #ddd;
  cursor: pointer;
}

.cb:checked ~ .box::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 4px;
  width: 7px;
  height: 13px;
  transform: rotate(40deg);
  border-right: 2px solid #045acf;
  border-bottom: 2px solid #045acf;  
}
.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
</div>

<div class="block">
  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
</div>

<div class="block">
  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
  <label><input class="cb" type="radio"><span class="box"></span> Test</label>
</div>

Upvotes: 2

Related Questions