复选框组选择的动态限制

Question

我有一个checkboxGroupInput，有 4 个选项（A、B、C、D）。
我想将允许的选择限制为 2 个选项。

允许用户选择第三个选项。
但在这种情况下，只有选中的新 (3rd) 和最后 (2nd) 选项应保持选中状态。

例如，如果用户选择B，然后选择D，然后选择A -
结果应该只检查D和A。

我正在尝试在 JS 中实现此逻辑，因为它在 R/Shiny 中无法正常工作。
主要原因是更新输入不会立即发生。
（它被我原来的 Shiny 应用程序中的其他失效延迟了，这需要相当长的时间）

小例子：

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) {}
)

Answer 1

注意：您生成的 HTML 可能看起来不同，但您需要的 JS 肯定是相同的。一切都是用vanilla JS编写的，如果你通常使用jQuery，你只需要更改最后的“激活”代码。

鉴于此 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>

执行此操作的 JS 代码非常简单（大量 cmets 来解释发生了什么）：

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);
  });
}

然后您必须在每个复选框组上“激活”它。这是我一无所知的部分。无论如何，希望它有所帮助:)

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

或者使用 jQuery：

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