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

jquery jquery-ui spinner readonly disabled-control
David Whiteman picture David Whiteman · Nov 2, 2013 · Viewed 7.9k times · Source

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

Cafe Coder picture Cafe Coder · Nov 3, 2013

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.

Related questions

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
Find out whether radio button is checked with JQuery?

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked. Take, for example the following code: $("#element").click(function() { $('#…

Read More
check / uncheck checkbox using jquery?

I have some input text fields in my page and am displaying their values using JavaScript. I am using .set("value","") function to edit the value, add an extra checkbox field, and to pass a value. Here I want to …

Read More