When I am trying to disable an input range on my page dynamically, all other input elements on my page stop working in chrome.

Here when I disable #mySlider, #chkBox and #myButton bees inaccessible and does not trigger respective functions, even can't able to check the checkbox.

My chrome version: 31.0.1650.63 m

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")
}

When I am trying to disable an input range on my page dynamically, all other input elements on my page stop working in chrome.

Here when I disable #mySlider, #chkBox and #myButton bees inaccessible and does not trigger respective functions, even can't able to check the checkbox.

My chrome version: 31.0.1650.63 m

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")
}

• javascript
• html
• google-chrome
• input
• range

Share Improve this question Follow edited Jul 25, 2020 at 8:58 Open AI - Opting Out 1,6311010 silver badges1515 bronze badges asked Dec 23, 2013 at 6:34 Prasanth K CPrasanth K C 7,33266 gold badges4242 silver badges6363 bronze badges 7

• 2 Looks like an issue with the range input, disabling it disabled all clicks, even right clicks are disabled. It's the same when using jQuery, and in JSBin, so the only thing left would be the range input causing issues in Chrome. – adeneo Commented Dec 23, 2013 at 6:48
• Seems like a bug with chrome. report it. crbug. – Monie corleone Commented Dec 23, 2013 at 6:53
• I just filed a bug on this. – Prasanth K C Commented Dec 23, 2013 at 6:56
• 1 Bug reported here Bug ID:330485 – Prasanth K C Commented Dec 24, 2013 at 6:10
• 1 As per chrome this issue is fixed now. bugs.chromium/p/chromium/issues/detail?id=326406 – Prasanth K C Commented Oct 13, 2017 at 6:49

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 1

1) Since this seems to be a bug with Chrome. You can just hack it by simulating a disabled input, and just change the event to onmouseup for this to work

/* 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';
    }
}

Working fiddle

Edit:

2) another way to hack this, is to avoid disabling it dynamically which is when the error occurs in the first place. have two range elements, one disabled and one abled. hide the disabled element while mirroring the value from the abled element.
when you want to disable the element, switch the two based on your condition.
check out this fiddle, the switch is smoove and not noticeable.

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

Why don't you try jquery selectors to disable it Html is <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!");
        });

     })
    

I know the bug has been fixed in chrome... For sometime, but after reviewing the cause and fix implemented for the bug I thought I would provide a workaround if needed.

    // Replace the `elem.disabled = true;` with
    setTimeout(function(){ elem.disabled = true; },0); 

The idea being we let the browser exit it's current event stream and then disable the input element.

The issue was essentially a catch-22, disable the input, and then update the range when the final event es in, the problem was the element was now disabled and as such would never receive such an event, this left the browser hanging, and it never released the UI.

For more specifics checkout the patch provided in the link in the ment by @PrasanthKC above.