javascript - Make all inputs with class readOnly - Stack Overflow

admin管理员组

文章数量:1375519

So I am building a drag and drop form builder and I want to make a particular field on all the inputs readOnly. This can be

• Select Dropdown
• Text input
• Number input
• Date input

Date input

All these inputs will be generated dynamically.

I had a look at How can i add readonly attribute on all input fields using javascript? & How to set readonly property to false on multiple textboxes with same class?

but none make the name input readOnly just by the class name.

I am currently doing it this way:

$("#editClick").on('click', function(){
 $('.myNameClass').attr('readonly', false);

});

But need a way to fire it every time a new field appears on the page(i.e. check is the length of a class increases)

Something like:

if ($(".myNameClass")[0]).increases -> fire event-> and every time it does

So I am building a drag and drop form builder and I want to make a particular field on all the inputs readOnly. This can be

• Select Dropdown
• Text input
• Number input
• Date input

Date input

All these inputs will be generated dynamically.

I had a look at How can i add readonly attribute on all input fields using javascript? & How to set readonly property to false on multiple textboxes with same class?

but none make the name input readOnly just by the class name.

I am currently doing it this way:

$("#editClick").on('click', function(){
 $('.myNameClass').attr('readonly', false);

});

But need a way to fire it every time a new field appears on the page(i.e. check is the length of a class increases)

Something like:

if ($(".myNameClass")[0]).increases -> fire event-> and every time it does

• javascript
• jquery
• html
• formbuilder

Share Improve this question Follow edited Jul 18, 2017 at 15:02 Blawless asked Jul 18, 2017 at 14:43 BlawlessBlawless 1,29933 gold badges1717 silver badges2929 bronze badges 4

• 1 Your question is missing an important part - what you're actually trying to do...? That said, all you need to do to make an input readonly is call prop('readonly', true) on it, but make sure you do it after the element has been appended to the DOM – Rory McCrossan Commented Jul 18, 2017 at 14:44
• 1 Show us at least some HTML + CSS + possible Javascript which you tried, not just just an image. Also be clear about what it does, vs what you want it do do. – Peter B Commented Jul 18, 2017 at 14:46
• Your second link shows exactly what your asking for... what don't you understand? – Heretic Monkey Commented Jul 18, 2017 at 14:52
• updated the info there. – Blawless Commented Jul 18, 2017 at 15:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

you can do this using this

jQuery <1.9

<script>
    $(function () {
       $('input[type="text"], textarea').attr('readonly','readonly');

    });
</script>

or use this for readonly mode

jQuery 1.9+

 $(function () {
         $('input[type="text"], textarea').prop("readonly",true);

    });

and remove readonly mode

jQuery <1.9

     $(function () {
         $('input[type="text"], textarea').removeAttr('readonly');

    });

</script>

or use this for remove

jQuery 1.9+

 $(function () {
         $('input[type="text"], textarea').prop("readonly",false);

    });

本文标签： javascriptMake all inputs with class readOnlyStack Overflow