Question

我想在jQuery Mobile页面上显示一些滑块以显示我的语言技能。显然，我不希望用户使用我的滑块并更改任何值。我知道禁用属性＆＃39; disabled = disabled＆＃39;或通过JS＆＃39; .slider（＆＃34;禁用＆＃34;）＆＃39;但是这个解决方案在我的滑块上有一个糟糕的视觉效果，我想避免。

我设法通过使用以下代码让它工作，但我正在使用我的代码的干式解决方案，这将允许我影响我的页面上的任何/所有滑块而不是针对每个ID

HTML：

<div id="languages">
  <label for="slider-fr">French (mother tongue):</label>
  <input name="slider-fr" id="slider-fr" min="0" max="200" value="200" type="range">
  <label for="slider-en">English:</label>
  <input name="slider-en" id="slider-en" min="0" max="200" value="190" type="range">
  <label for="slider-es">Spanish:</label>
  <input name="slider-es" id="slider-es" min="0" max="200" value="85" type="range">
</div>

JS：

var slider_fr = $("#slider-fr").slider().val();
var slider_en = $("#slider-en").slider().val();
var slider_es = $("#slider-es").slider().val();
$("#slider-fr").change(function() {
    $(this).slider().val(slider_fr).slider("refresh");
});
$("#slider-en").change(function() {
    $(this).slider().val(slider_en).slider("refresh");
});
$("#slider-es").change(function() {
    $(this).slider().val(slider_es).slider("refresh");
});

感谢您的帮助：）

jquery移动滑块 - 阻止用户更新值

0 个答案: