jquery - 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?

标签： jqueryprimefaces

Answer 1

它适用于以下代码：

$(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() {});是原因。在所有 DOM 准备好后，将加载此主体中的函数。