发表新帖
发表新帖

How can I use jQuery to make an input readonly?

后端 未结
关注
13 2157
挽巷
挽巷 2020-12-07 09:54

I have the following input:

How c

相关标签:
13条回答
  • 时光取名叫无心
    2020-12-07 10:27

    You can do this by simply marking it disabled or enabled. You can use this code to do this:

    //for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

    or

    $('#fieldName').prop('readonly', true);

    $('#fieldName').prop('readonly', false);

    --- Its better to use prop instead of attr.

    0 讨论(0)
  • 独厮守ぢ
    2020-12-07 10:27

    Given -

    <input name="foo" type="text" value="foo" readonly />

    this works - (jquery 1.7.1)

    $('input[name="foo"]').prop('readonly', true);

    tested with readonly and readOnly - both worked.

    0 讨论(0)
  • 一整个雨季
    2020-12-07 10:28

    simply add the following attribute

    // for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

    jQuery to make the change to the element (substitute disabled for readonly in the following for setting readonly attribute).

    $('#fieldName').attr("disabled","disabled")

    or 

    $('#fieldName').attr("disabled", true)

    NOTE: As of jQuery 1.6, it is recommended to use .prop() instead of .attr(). The above code will work exactly the same except substitute .attr() for .prop().

    0 讨论(0)
  • 醉梦人生
    2020-12-07 10:31 
    <html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>
    0 讨论(0)
  • 醉梦人生
    2020-12-07 10:34

    There are two attributes, namely readonly and disabled, that can make a semi-read-only input. But there is a tiny difference between them.

    <input type="text" readonly />
<input type="text" disabled />
    • The readonly attribute makes your input text disabled, and users are not able to change it anymore.
    • Not only will the disabled attribute make your input-text disabled(unchangeable) but also cannot it be submitted.

    jQuery approach (1):

    $("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

    jQuery approach (2):

    $("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

    JavaScript approach:

    document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

    PS prop introduced with jQuery 1.6.

    0 讨论(0)
  • 名媛妹妹
    2020-12-07 10:35

    These days with jQuery 1.6.1 or above it is recommended that .prop() be used when setting boolean attributes/properties.

    $("#fieldName").prop("readonly", true);
    0 讨论(0)
 看不清?
提交回复
热议问题