javascript - jQuery，无法选中复选框

Question

我只是有一个复选框，我想通过复选框的状态来控制其下方下拉列表的可见性。

<div class="coral-Form-fieldwrapper">
    <label class="coral-Checkbox">
        <input class="coral-Checkbox-input" id="select-all-namespaces" data-init="checkbox" checked data-type="checkbox" data-config-id="selectAll">
            <span class="coral-Checkbox-checkmark"></span>
            <span class="coral-Checkbox-description">Select All</span>
    </label>
</div>
<div class="coral-Form-fieldwrapper">
    <span class="coral-Select some-selection-class" data-init="select" data-config-id="tagNamespaces" name="tagNamespaces">
        <button type="button" class="coral-Select-button coral-MinimalButton">
            <span class="coral-Select-button-text">{{i18n "Select something"}}</span>
        </button>
        <select class="coral-Select-select" multiple="true">
            {{#each configOptions}}
                <option value="{{encodeForHTMLAttr this.id}}">{{this.label}}</option>
            {{/each}}
        </select>
    </span>
</div>

这是控制它的 JavaScript:

var $an = $("#select-all-namespaces");
var $tn = $(".some-selection-class")
if($an.data("default")) { // I broke point into this statement, made sure 'checked' prop set to true 
    $an.prop("checked", true);
    $tn.hide();
} else {
    $an.prop("checked", false);
    $tn.show();
}
$an.on("click", function() {
    if($an.is(":checked")) {
        $tn.hide();
    } else {
        $tn.show();
    } 
});

但是，该复选框默认加载为“未选中”，单击它后，会显示下拉列表，但我的问题是永远无法选中该复选框，因此下拉列表不会消失。我想知道是什么阻止我设置“已检查”状态。

叹息...... fiddle 似乎运作良好:(

http://jsfiddle.net/9cn2cLrx/

Answer 1

这是一个应该可以工作的 jsfiddle。我做的两件事是添加 type="checkbox" 和添加 data-default="true" 到 #select-all-namespaces元素。目前尚不完全清楚您想要什么行为，但您可以更改数据默认值，以更改默认情况下是否选中该复选框。

https://jsfiddle.net/vryjpjhp/