34

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

3 Answers 3

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;
}
2
  • This trick will not do the job, as this one will disable the slider only if we drop it in specific value. I need something that will disable the slider on move itself. Dec 23, 2013 at 10:05
  • do you not want the value to not be greater than 2 ? bc there's plenty of ways to achieve this depending on what functionality you want
    – Jay Harris
    Dec 23, 2013 at 15:03
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!");
        });

     })
    
0

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 comes 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 comment by @PrasanthKC above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.