如何使用另一个按钮启用/禁用一个按钮？

Question

I'm trying to enable/disable some buttons, using another toggle button.

I'm trying to do it by adding a class 'active' to the buttons, and targeting only the buttons with the class.

Here is an example (That doesn't work):

 $('#on-off').on('click', () => { $('#test').addClass('active'); $('#indication').text('Test is active'); }); $('#test .active').on('click', () => { $('#result').text('Test was clicked!'); }); 

 <button id='on-off'>Toggle Test</button> <div id='indication'></div> <button id='test'>Test</button> <div id='result'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

The full code is here .

Answer 1

You should set the disabled property to enable or disable it. You can use .prop() method

Also note #test .active will not work as its descendant selector and button has no child element.

 $('#on-off').on('click', () => { $('#test').prop('disabled', !$('#test').prop('disabled')); $('#indication').text('Test is active'); }); $('#test').on('click', () => { $('#result').text('Test was clicked!'); }); 

 <button id='on-off'>Toggle Test</button> <div id='indication'></div> <button id='test'>Test</button> <div id='result'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>