How to disable a knob by a button click in jQuery or Javascript?

Question

I want to disable my knob by a button click. how can I make it possible. here is my html code

<div class="knob_control">
    <input id="bluegainControl" class="knob_control" 
           data-width="80"data-cursor=true data-fgColor="#00255B" data-thickness=.3 value="0">
</div> 

This is the code I added in the button click. but it's not working

$("#bluegainControl").prop("disabled", "disabled"); 

Answer 1

If I understood your question properly then try this, one button will disable the input and another will enable it.

Your code is working fine, it's not clear to me why your code isn't working for you as you didn't post your related code.

Use click method to track your click event.

 $('#dBtnClk').click(function(){ $('#bluegainControl').prop('disabled', true); }); $('#eBtnClk').click(function(){ $('#bluegainControl').prop('disabled', false); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="knob_control" id="knob_control"><input id="bluegainControl" class="knob_control" data-width="80"data-cursor=true data-fgColor="#00255B" data-thickness=.3 value="0"></div> <button id="dBtnClk">Disable Input</button> <button id="eBtnClk">Enable Input</button>