How do I disable or hide jQuery UI spinner buttons without disabling widget?

Question

I originally was using the option to disable the spinner widget, but I don't want to use that, because it causes the value of the widget to be lost when the form is submitted. What I am looking for is to set the widget to readOnly.

When I set it to read only, it correctly makes it so the user cannot type in the field, but unfortunately they can still click the up and down buttons. I am wanting to know if there is a way to either disable or hide the spinner buttons without affecting the text part of the widget, so I can later re-enable or show those buttons.

Thanks in advance! -David

Answer 1

To hide the spinner controls, run this:

$('.ui-spinner a.ui-spinner-button').css('display','none');

To make them reappear run this:

$('.ui-spinner a.ui-spinner-button').css('display','block');

Change the selector value to fit your document structure.

Answer 2

The other solution using jQuery:

$('#spinner').parent().hide()

or

$('#spinner').parent().show()

or pure js:

var sp = document.getElementById('spinner')
sp.style.display = 'none';
sp.style.display = 'block';

Answer 3

This is old, but a question I had and the most complete answer is kbwood.au's response. Basically cancel the event in the start (or spin) event if the element is readonly. Then you don't have to worry about the up/down/page up/page down keys which are still enabled.

Answer 4

I would use

$("#my_input").spinner({ disabled: false });

http://www.medicalsuture.com.br/js/development-bundle/docs/spinner.html