0

I have a readonly JQuery UI spinner and I want to disable or hide the spinning buttons.

I saw from a previous question, that if I want to hide all spinner buttons I can use: 

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

and it work great.

But how do I filter just one specific element?

I have tried 

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

and also 

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

without succes.

Improve this question
7
  • Your selector works or the style itsn't applyed ?
    – Vitor Piovezam
    Commented Jun 9, 2019 at 2:30
  • Style is not applied, selector is read only but the spinners buttons are not hided and working.
    – Radu
    Commented Jun 9, 2019 at 2:36
  • Try another jQuery method like .addClass(). Define a .hidden class on you stylesheet with display:none and use $('.ui-spinner specificElement.ui-spinner-button').addClass('hidden');
    – Vitor Piovezam
    Commented Jun 9, 2019 at 2:42
  • Thank you, I did, spinner buttons are still there. I have defined .hidden { display: none; } and I have used $('.ui-spinner #specificElement.ui-spinner-button').addClass('hidden'); or $('.ui-spinner specificElement.ui-spinner-button').addClass('hidden'). No joy!
    – Radu
    Commented Jun 9, 2019 at 2:52
  • So this is not a jQuery question, you have an CSS problem. To help you is needed more information. Can you edit the question and post your stylesheet ? Maybe this could help too: stackoverflow.com/questions/20663712/…
    – Vitor Piovezam
    Commented Jun 9, 2019 at 3:03

1 Answer 1

Reset to default
1

Spinner wraps the element upon initialization and it appears like so:

<span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="display: none;">
  <input id="spinner" name="value" class="spin ui-spinner-input" autocomplete="off" role="spinbutton">
  <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
    <span class="ui-button-icon ui-icon ui-icon-triangle-1-n"></span>
    <span class="ui-button-icon-space"> </span>
  </a>
  <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
    <span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span>
    <span class="ui-button-icon-space"> </span>
  </a>
</span>

So to hide the spinner objects we can select the text field and then select it's Parent element.

Consider the following:

$(function() {
  $(".spin").spinner();

  $("#spinner-2").parent().add("label[for=spinner-2]").hide();
});
.spin-wrap {
  width: 340px;
}

.spin-wrap .ui-spinner {
  margin-bottom: 3px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="spin-wrap">
  <label for="spinner-1">Select value 1:</label>
  <input id="spinner-1" name="value[1]" class="spin">
  <label for="spinner-2">Select value 2:</label>
  <input id="spinner-2" name="value[2]" class="spin">
  <label for="spinner-3">Select value 3:</label>
  <input id="spinner-3" name="value[3]" class="spin">
</div>

Here you can see that $("#spinner-2") is just selecting the input element. I then used .parent() to select the spinner itself. I also used .add() to add the label element to the object so it is hidden too.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.