当在chrome中动态禁用输入类型范围时,所有输入元素都停止工作并且似乎无法访问

Question

当我尝试动态禁用页面中的输入范围时,页面中的所有其他输入元素都停止在chrome中工作.

这里当我禁用#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();" />

脚本

function checkMove(elem) {

    var minVal = elem.value;

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

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

Answer 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';
    }
}

工作小提琴

编辑：

2）解决此问题的另一种方法是避免在错误发生时动态禁用它。有两个range元素，一disabled和一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;
}