range input disable does not work in chrome

I am disabling my range input however in chrome it shows it grayed out but it is still usable.

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

I would assume the above would not allow you to change its value.

Am I doing it wrong?

jsFiddle

开发者_运维知识库

Relevant specification Disabled

---

Here is the Chrome bug report, guess just need to wait for version 15 as the commenters mentioned.

Bug 54820

---

you can remove all binded events of that specific scroll group to make that scroll disable like:

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

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

its works .. no need to disable text field; beacause on form submission that field will not be posted ..

---

My solution JSFIDDLE (Works fine in default android browser) 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;
    }
}

---

I found a corny solution for chrome, because it doesn't seem like you can disable it from user input. Put a div over it so a user cannot interact with it. Not pretty but works:

<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>