отключение диапазона ввода не работает в Chrome

Question

Я отключаю ввод диапазона, однако в chrome он отображается серым цветом, но он все еще пригоден для использования.

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

Я бы предположил, что вышеупомянутое не позволит вам изменить его значение.

Я неправильно делаю?*

Соответствующая спецификация Отключено

Answer 1

Мое решение 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 2

Вот отчет об ошибке в Chrome, думаю, просто нужно дождаться версии 15, как упоминалось в комментариях.

Ошибка 54820

Answer 3

вы можете удалить все связанные события этой конкретной группы прокрутки, чтобы отключить прокрутку, например:

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

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

его работы .. нет необходимости отключать текстовое поле; потому что при отправке формы это поле не будет опубликовано ..

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>