Tukukkk

I have a checkboxGroupInput with 4 choices (A, B, C, D).

I want to limit the allowed selection to 2 options.

The user is allowed to select a 3rd option.

But in that case only the new (3rd) and last (2nd) options that were selected should stay checked.

For example, if a user selects B, then D, and then A -

the outcome should be only D and A checked.

I'm trying to implement this logic in JS, since it doesn't work properly in R/Shiny.

The main reason is that updating the input doesn't occur immediately.

(it is delayed by other invalidations in my original Shiny app, that take quite some time)

Minimal example:

library(shiny)



shinyApp(

  ui = fluidPage(

    tags$script(

      "JS code here..."

    ),



    checkboxGroupInput(

      inputId = "the_checkbox",

      label = "Checkbox",

      choices = c("A", "B", "C", "D")

    )

  ),



  server = function(input, output, session) {}

)

Note: The HTML you produce likely looks different, but the JS you need is most certainly the same. Everything is written in vanilla JS, in case you usually use jQuery, all you need to change is the "activation" code at the end.

Given this HTML:

<div class="inputgroup">

  <div class="checkbox">

    <input type="checkbox" name="check1" value="A" id="c1">

    <label for="c1">A</label>

  </div>

  <div class="checkbox">

    <input type="checkbox" name="check2" value="B" id="c2">

    <label for="c2">B</label>

  </div>

  <div class="checkbox">

    <input type="checkbox" name="check3" value="C" id="c3">

    <label for="c3">C</label>

  </div>

  <div class="checkbox">

    <input type="checkbox" name="check4" value="D" id="c4">

    <label for="c4">D</label>

  </div>

</div>

The JS code to do it is pretty simple (plenty of comments to explain what's going on):

function justTwo (checkboxGroup) {

  // checkboxGroup is the <div class="inputgroup"> node

  // ---------



  // step 1: grab all <input> elements inside the group

  var boxes = Array.prototype.slice.call(checkboxGroup.querySelectorAll('input'));



  // step 2: create a list, where nodes which are checked are stored

  var checked = ;



  // step 3: create a function which unchecks boxes from the beginning

  //         of the list if a third checkbox is checked

  function handleCheckedChange (event) {

    if (event.target.checked) {    // if the user checked the box...

      if (checked.length >= 2) {   // ... and two or more boxes are checked already ...

        var fst = checked.shift(); // ... take the first/oldest checked ...

        fst.checked = null;        // ... uncheck it ...

      }

      checked.push(event.target);  // ... and save the reference to the newly checked

    } else {                                    // if he unchecked a box ...

      checked = checked.filter(function (box) { // ... remove possible references

        return box !== event.target;

      });

    }

  }



  // step 4: make every <input> "listen" to check-changes

  boxes.forEach(function (box) {

    box.addEventListener('change', handleCheckedChange);

  });

}

You then have to "activate" it on each checkbox group. This is the part I know nothing about. Hopefully it helps anyway :)

justTwo(document.querySelector('.inputgroup'));

Or with jQuery:

$('.inputgroup').each(function () { justTwo(this); });