3

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

David Whiteman
  • 110
  • 1
  • 10

4 Answers4

6

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.

Cafe Coder
  • 944
  • 9
  • 14
  • 1
    Thanks, this worked for me. I would have preferred to have the buttons grayed out and disabled, but hidden works well too. This is the solution I am using. Since I am in a function where I have a handle to the input, I used: `jQuery(this).siblings('.ui-spinner-button').css('display', 'none');` – David Whiteman Nov 04 '13 at 22:11
  • 1
    you should be able to do this `jQuery('.ui-spinner .ui-spinner-button').attr('disabled', 'disabled');` to disable to buttons instead of hide them. – DrCord Jul 18 '15 at 00:26
  • Neat, but users can still get around this using their keyboard: up/down and page up/page down buttons – LoJo Apr 24 '19 at 20:37
  • How can i hide only for a specific element? I tried $('#element a.ui-spinner-button').css('display','none'); and it does not work also nit's not working $('.ui-spinner element.ui-spinner-button').css('display','none'); – Radu Jun 09 '19 at 02:16
0

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';
Vyacheslav
  • 26,359
  • 19
  • 112
  • 194
0

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.

LoJo
  • 142
  • 2
  • 11
0

I would use

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

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

luke_16
  • 187
  • 1
  • 1
  • 11