如何使用脚本禁用/启用HTML中的范围控件?

您可以这样做:

$(":button.range").click(function(){
   let status = $(this).parent().parent().find("input[type='range']:visible:first").prop('disabled');
   if(status === true){
      $(this).parent().parent().find("input[type='range']:visible:first").prop('disabled',false);
   }else{
      $(this).parent().parent().find("input[type='range']:visible:first").prop('disabled',true);
   }
});  

您可以使用下面的jquery来了解是否禁用了输入范围控制。

 if ($(this).parent().parent().find("input[type='range']").prop("disabled") === true) {
    //write your code for disabled range control
}

如果要启用相同的控件,请使用下面的jquery。

$(this).parent().parent().find("input[type='range']").prop("disabled", false);

如果您只想切换它,可以使用下面的脚本:

$(":button.range").click(function(){
   let status = $(this).parent().parent().find("input[type='range']:visible:first").prop('disabled');

   $(this).parent().parent().find("input[type='range']:visible:first").prop('disabled', !status);
});  

如果是 true 然后它将设置为 false 反之亦然。

你可以使用 toggleAttribute() -gt; https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

我的示例使用普通的javascript,但我认为您也可以将它与jquery示例一起使用。

$(":button.range").click(function(){
    $(this).parent().parent().find("input[type='range']:visible:first").toggleAttribute("disabled");
});

const toggleButton = document.getElementsByClassName('toggle')[0];
const rangeSlider = document.getElementById('start');

const toggleRange = () => {
  const status = rangeSlider.toggleAttribute('disabled');
  console.log(status);
};

toggleButton.addEventListener('click', toggleRange);

<div>
  <input type="range" id="start" name="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>
<button class="toggle">toggle</button>