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

Question

是html / jquery / javascript的新手。我在按钮单击下面的脚本中禁用了范围控制。如果第二次单击该按钮，则需要重新启用范围控件。那么如何检查范围控制是禁用还是启用？

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

Answer 1

您可以这样做：

$(":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);
   }
});  

Answer 2

您可以使用以下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);

Answer 3

如果只希望切换它，则可以使用以下脚本：

$(":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，反之亦然。

Answer 4

您可以使用<!-- <section id="sticky-trigger"> <section id="sticky-wrapper" class=""> <div class="container" style="position: fixed;top: 0;"> Other content </div> </section> </section> --> -> https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

我的示例使用Vanilla JavaScript，但我认为您也可以在jQuery Example中使用它。

// var trigger = document.querySelector('#sticky-trigger')
// $(window).scroll(function(e) {
//   
//   if( $(this).scrollTop() > trigger.offset().top ) {
//     mn.addClass('sticky');
//   } else {
//     mn.removeClass('sticky');
//   }
// });

toggleAttribute()

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