client-side disabling manual input in p:spinner not working

Question

I am using PrimeFaces <p:spinner>, I want to disable manual input, by setting the <input> tag of the spinner to readonly. I have tried to achieve it by using jQuery:

$('.ui-spinner-input').prop('readonly', true);
$('#dtProduct:spinnerQty').prop('readonly', true);
$('#dtProduct:spinnerQty_input').prop('readonly', true);

Non of the above works. I have also try to select it by tag name and loop through it:

$("input").each(function() 
{
    alert("");
    if($(this).hasClass("ui-spinner-input")) {
    alert("");
    }
});

doesn't work neither, not even alert anything. I am sure that my jQuery is working by using this technique.

Below is the screenshot of the element source code from Google Chrome

My class name and id looks right, but it just not working at all, any idea?

Escape meta characters, Use `$('#dtProduct\\:spinnerQty_input')`, Although `$('.ui-spinner-input').prop('readonly', true);` should have worked — Satpal, May 22 '18 at 13:19
Possible duplicate of [How to select JSF components using jQuery?](https://stackoverflow.com/questions/7927716/how-to-select-jsf-components-using-jquery) — Kukeltje, May 22 '18 at 13:20
Please when having issues, check all >35 upvote questions or answers. 80-90% certain the solution in is in there — Kukeltje, May 22 '18 at 13:21
@satpal: OP forgot to take the `:0:` part in it into account. Looks like it is in an iterating component — Kukeltje, May 22 '18 at 13:24
@Kukeltje the first query in the question uses a class, not an id. Newbie, any errors in your browser's Javascript console? — Jasper de Vries, May 22 '18 at 13:28
@Kukeltje, Still need to escape meta characters https://api.jquery.com/category/selectors/ — Satpal, May 22 '18 at 13:30
@Satpal No, no error at all. I try to escape `$('#dtProduct\\:spinnerQty_input')` still not working — Newbie, May 22 '18 at 13:32
@Kukeltje yes, it is in an iterating component, which is `dataTable`. What should I do with `:0:`? — Newbie, May 22 '18 at 13:33
did I miss something in `$('.ui-spinner-input').prop('readonly', true);`? this looks fine. But it just not work — Newbie, May 22 '18 at 13:39
What does `$('.ui-spinner-input')` return on the developer console commandline? — Kukeltje, May 22 '18 at 13:41
@Kukeltje it returns `r.fn.init(6) [...]` which `...` is all of my spinner components id and class, like `input#dtProduct:0:spinnerQty_input.ui-spinner-input.ui-inputfield.ui-state-default.ui-corner-all` — Newbie, May 22 '18 at 13:55
So the selector works! What does `$('.ui-spinner-input')[0]` show? — Kukeltje, May 22 '18 at 14:07
@Kukeltje it returns the `` tag of my first spinner. It looks good, but why just won't work? — Newbie, May 23 '18 at 00:20
So your title was as stated earlier completely wrong. The selectors ARE working. I improved your title — Kukeltje, May 23 '18 at 06:30

score 0 · Accepted Answer · answered May 23 '18 at 01:31

It works with the following code:

$(document).ready(function() {
    disableInput();
});

function disableInput()
{
    $('.ui-spinner-input').bind("keydown", function(event) {
        event.preventDefault();
    });

    $('.ui-spinner-input').focus(function() {
        $(this).blur();
    });
}

$(document).ready(function() {}); is the reason. The function within this body will be loaded after all the DOMs are ready.

client-side disabling manual input in p:spinner not working

1 Answers1