jquerycssjquery-uispinnerreadonly-attribute

Hiding spinner buttons for a specific Jquery UI spinner


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.


Solution

  • 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.