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

Когда я пытаюсь отключить диапазон ввода на моей странице динамически, все остальные элементы ввода на моей странице перестают работать в хроме.

Здесь, когда я отключен #mySlider, #chkBox и #myButton становятся недоступными и не запускают соответствующие функции, даже не могут проверить флажок.

Моя хромированная версия: 31.0.1650.63 м

FIDDLE DEMO " >

HTML

 <input type="range" min="0" max="5" value="0" id="mySlider" onChange="checkMove(this)" />

 <input type="checkbox" value="one" id="chkBox" ><br/>
 <input type="button" id="myButton" value="Click Me" onClick="clickCheck();" />

SCRIPT

function checkMove(elem) {

    var minVal = elem.value;

    if (minVal == 2) {
        elem.disabled = true;
    }
}

function clickCheck() {
    alert("hi")
}

Ответ 1

1) Так как это кажется ошибкой с Chrome. Вы можете просто взломать его, моделируя отключенный вход, и просто измените событие на onmouseup, чтобы это работало

/* CSS */

#range {
 position: relative    
}

#range.disabled .cover {
  display: block;
}

#range.disabled input {
 color: rgb(82,82,82);
}

.cover {
 width: 100%;
 height: 100%;
 background: transparent;
 z-index:5;
 position: absolute;
 top: -5px;
 bottom: 0;
 right:0;
 left: 0;
 display: none;
}

<!-- HTML -->
<label id="range">
  <input type="range" min="0" max="5" value="0" id="mySlider" onmouseup="checkMove(this)">
  <div class="cover"></div>
</label>
<input type="checkbox" value="one" id="chkBox">
<br/>
<input type="button" id="myButton" value="Click Me" onClick="clickCheck();" />


// JAVASCRIPT
var range = document.getElementById('range');
function checkMove (elem) {
    var minVal = elem.value;
    console.log(minVal)
    if (minVal >= 2) {
       range.className = 'disabled';
    }
}

Рабочая скрипка

Edit:

2) другой способ взломать это, чтобы избежать его динамического отключения, когда возникает ошибка. имеют два элемента range, один disabled и один abled. скрыть отключенный элемент при зеркалировании значения из элемента abled. Если вы хотите отключить элемент, переключите два на основе вашего условия.
этот скрипт, переключатель выключен и не заметен.

<div id="range">
  <input type="range" min="0" max="5" value="0" id="mySlider" onchange="checkMove(this)">
  <input type="range" disabled min="0" max="5" value="0" id="altSlider">
</div>

// Javascript
var range = document.getElementById('range'),
    alt   = document.getElementById('altSlider');

function checkMove(elem) {
    var minVal = elem.value;
    alt.value = minVal;
    console.log(minVal)
    if (minVal == 2) {
      range.className = 'disabled';
    }
}

CSS

#range {
 position: relative;
 display: inline-block;
}
#range.disabled #altSlider {
  opacity: initial;
}
#range.disabled #mySlider {
 display: none;
}
#altSlider {
 opacity: 0;
}
#mySlider {
 z-index:5;
 position: absolute;
 top: 0;
 left: 0;
}

Ответ 2

Почему бы вам не попробовать селектора jquery, чтобы отключить его Html - это <input type="range" min="0" max="5" value="0" id="mySlider" /> <input type="checkbox" value="one" id="chkBox" ><br/> <input type="button" id="myButton" value="Click Me" />

JQuery

    jQuery(document).ready(function($){

    $("#mySlider").change(function(){
       var val = parseInt($(this).val());
       var maxrange= parseInt($(this).attr("max")); 
       if(val>=2){
        $(this).val(2);
        $(this).attr("disabled", "true");   
        } 
       })

        $("#chkBox, #myButton").click(function(){
          alert("It Works!");
        });

     })