Question

我尝试在我的网站上使用不确定复选框。物化工作的例子。但是，当我将代码复制到页面上时，复选框没有任何反应。仍然是未选中的普通复选框。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.css">
<body>
<div id="checkbox" class="section scrollspy">
    <form action="#">
        <p>
            <label>
                <input id="indeterminate-checkbox" type="checkbox" />
                <span>Indeterminate Style</span>
            </label>
        </p>
</div>

Answer 1

注意：在您的HTML中，您忘记了表单结束标记。

:indeterminate：：indeterminate CSS伪类表示状态不确定的任何表单元素。

...

元素的不确定属性已被JavaScript设置为true

要设置此属性，您可以用js编写：

document.getElementById('indeterminate-checkbox').indeterminate = true;

和在jQuery中

$('#indeterminate-checkbox').prop('indeterminate', true);

摘要：

// when document is ready....
document.addEventListener('DOMContentLoaded', function(e) {
    // set the property
    document.getElementById('indeterminate-checkbox').indeterminate = true;;
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<div id="checkbox" class="section scrollspy">
    <form action="#">
        <p>
            <label>
                <input id="indeterminate-checkbox" type="checkbox"/>
                <span>Indeterminate Style</span>
            </label>
        </p>
    </form>
</div>

如何显示不确定复选框？

1 个答案: