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

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

叹息......小提琴似乎运作良好:(

http://jsfiddle.net/9cn2cLrx/

Answer 1

这是一个应该工作的jsfiddle。我做的两件事是添加type="checkbox"并将data-default="true"添加到#select-all-namespaces元素。目前还不完全清楚您要采取的行为，但如果选中此复选框，则可以更改数据默认值以进行更改。

https://jsfiddle.net/vryjpjhp/

jQuery，无法选中复选框

1 个答案: