Question

我正在禁用我的范围输入但是在Chrome中它显示为灰色，但它仍然可用。

<input type="range" disabled min="0" max="100"/>

我认为上述内容不允许您更改其值。

我做错了吗？

jsFiddle

相关规范Disabled

Answer 1

以下是Chrome错误报告，猜测只需要等待评论者提到的第15版。

Bug 54820

Answer 2

您可以删除该特定滚动组的所有绑定事件，以使该滚动禁用，如：

<div id="fieldset1">
<input type="range" disabled min="0" max="100" readonly="1"/>
</div>

<script>
 $(":range").rangeinput();
 $('#fieldset1 *').unbind(); // for all events
</script>

它的作品.. 无需禁用文本字段;因为表单提交，该字段将不会被发布..

Answer 3

我的解决方案JSFIDDLE（在默认的android浏览器中工作正常） HTML

<input id="range" type="range" value="10" min="0" max="30" step="10"/>
<button id="disableBtn">Disable</button>

JS

document.getElementById('disableBtn').addEventListener('input', filter);
document.getElementById('disableBtn').addEventListener('click', disable);

function disable(){
    document.getElementById('range').disabled = !document.getElementById('range').disabled;
}

function filter(){
    if(document.getElementById('range').disabled){
        document.getElementById('range').value = document.getElementById('range').defaultValue;
    }
}

Answer 4

我找到了一个用于chrome的老套解决方案，因为它似乎不能从用户输入中禁用它。在它上面加一个div，这样用户就无法与之交互。不漂亮，但有效：

<div style="position:relative;">
    <div style="position:absolute;z-index:5;width:100%;height:100%;"></div>
    <input type="range" disbaled=True min="0" max="100" value="0"/><span id="v">100</span>
</div>

范围输入禁用在chrome中不起作用

4 个答案: