Checkbox behave like radiobox javascript

Question

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!

The problem occurs because you are creating the elements dynamicly. You should use event delegation instead to solve this issue. More info in this question: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript - Keep in mind that you will run into other issues as well with this. Like all rows have the same class so selecting anything in one of the rows will deselect all the other rows. — icecub, Nov 28 '19 at 17:53

score 2 · Accepted Answer · answered Nov 28 '19 at 18:06

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>

Can't check 2 radios at a time in same group though – charlietfl Nov 28 '19 at 18:12 — charlietfl, Nov 28 '19 at 18:12

score 0 · Answer 2 · answered Nov 28 '19 at 18:07

0

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.

answered Nov 28 '19 at 18:07

hero24

139
2

@OPTIMUS PRIME thank you for that solution, I found it worked very well and I was able to implement it with ease. Thanks agan for your help :-) – Jaffa Nov 29 '19 at 17:11

Checkbox behave like radiobox javascript

2 Answers2