How to disable rangeslider in jQuery Mobile via javascript

Question

I'm trying to properly disable a jQuery Mobile rangeslider via Javascript. But it doesn't work. If I add the disabled attribute to the <input> Elements in the Html file it works. But then if I try to disable it via

$('#range-monday-a').attr("disabled", "disabled");
$('#range-monday-b').attr("disabled", "disabled");

it adds disabled="disabled" attribute to the input elements in the DOM, but the display doesn't change and I can still use the slider. ("#range-monday-a" and "#range-monday-b" are the ids of both input elements of the rangeslider)

I assume that's because jQuery Mobile renders additional divs and stuff for the rangeslider. But I can't find the answer on jquerymobile.com, nor here or via google.

Answer 1

Have you tried:

$('#range-monday-a').slider('disable');
$('#range-monday-b').slider('disable');

From docs: http://jquerymobile.com/demos/1.3.0-rc.1/docs/forms/slider/methods.html

Answer 2

You can also do it with a single selector:

$("#range-monday-a, #range-monday-b").slider("disable");

Or even better:

$("#ancestor input[data-type='range']").slider("disable");

However, note that the numeric fields at both sides will remain at full opacity in any case - I filed the bug.