復選框的行為類似於單選框 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);

也應該出現在刷新函數的末尾，但是元素的類匹配將應用於具有給定類的所有復選框，因此（如果我沒有誤解您的意圖），您應該為每一行應用不同的類。