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

但是，默認情況下，該復選框加載為“未選中”，單擊后會顯示下拉列表，但我的問題是該復選框永遠無法選中，因此該下拉列表不會消失。 我想知道是什么阻止了我設置“已檢查”狀態。

igh ...小提琴似乎運作良好:(

http://jsfiddle.net/9cn2cLrx/

Answer 1

這是應該工作的jsfiddle。 我做的兩件事是添加type="checkbox"並將data-default="true"到#select-all-namespaces元素。 尚不完全清楚您要采取的行為，但是如果默認情況下未選中此復選框，則可以更改數據默認值以更改。

https://jsfiddle.net/vryjpjhp/