选中具有相同 class 的两个复选框之一

Question

我刚开始使用语义 UI，我有一个愚蠢的问题。我有两个 class 名称为 "ui toggle checkbox" 的复选框。加载页面时，我想根据某些条件选中这些复选框。

  <div class="ui toggle checkbox " id="ssl">
            <input type="checkbox" name="SSL" >
            <label>3</label>
        </div>
        <br>
        <label>Web Service Request Logging : </label>
        <div class="ui toggle checkbox" id="wsl">
            <input type="checkbox" id="Logging" >
            <label>7</label>
        </div>

Javascript代码：

$(document).ready(function () {
    var wsl = Math.floor((Math.random() * 10) + 1);
    var ssl = Math.floor((Math.random() * 10) + 1);

    alert(wsl);
    alert(ssl);

    if (ssl <3) {
        $('.ui.toggle.checkbox').checkbox('check');
    }

    if (wsl <7) {
        $('.ui.toggle.checkbox').checkbox('check');
    }     

});

问题是，当数字是 5 时，它会选中两个复选框。如何在语义 UI 中区分具有相同 class 的两个复选框。任何帮助将不胜感激。

Answer 1

我只使用 id 属性并获取复选框输入元素并使用 .attr() 切换选中的属性，例如：

$(document).ready(function () {
    var wsl = Math.floor((Math.random() * 10) + 1);
    var ssl = Math.floor((Math.random() * 10) + 1);

    alert(wsl);
    alert(ssl);

    if (ssl <3) {
        $('#ssl input:checkbox').attr('checked', true);
    }

    if (wsl <7) {
        $('#wsl input:checkbox').attr('checked', true);
    }     

});

选中具有相同 class 的两个复选框之一

check one of the two checkboxes with the same class

semantic-ui