复选框的行为类似于 radiobox javascript

Question

我有一个基于用户从下拉列表中选择的数字动态创建的表。该表由 3 个复选框组成。每行最多可勾选 2 个复选框。

复选框 2 和 3 的行为类似于单选按钮（我知道只使用单选按钮会让我的生活更轻松，但表格看起来不正确，因为只有一个复选框和 2 个单选按钮）。如果选择 2，然后用户点击 3，则 2 将变为未选中状态。

我在这里找到了这个脚本：http://jsfiddle.net/44Zfv/724/，它运行良好，但是当我尝试将它集成到我的项目中时它不起作用。

我在这里创建了一个小提琴：https://jsfiddle.net/pcqravwj/1/ 这演示了场景。正如您将看到的那样，第 0 行的复选框不是动态创建的，并且两个复选框都不能被选中。我已将 .cbh 类添加到我在第 1 行动态创建的复选框中。但是，可以选中所有 3 个复选框，但我确实注意到，如果选中第 0 行中的复选框，它会清除第 1 行中具有相同类的复选框。

这是我用来尝试控制复选框行为的一段代码

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

我只是想知道是否有人可以帮助我弄清楚这里发生了什么。作为一个新手，脚本看起来应该可以工作，我正在努力寻找错误。

非常感谢您的帮助。

谢谢！

Answer 1

您也可以使用 CSS 创建自定义复选框）使用隐藏的单选按钮。

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>

Answer 2

您需要更新刷新中的处理程序，以便将它们应用于所有复选框，因此：

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

也应该出现在刷新函数的末尾，但是元素的类匹配将应用于具有给定类的所有复选框，因此（如果我没有误解您的意图），您应该应用不同的类每一行。