在 javascript 中将输入设置为只读

Question

I am currently trying to create a JS method which sets a specific input field as readonly if another field contains a value inside it but i am having issues with getting it to work.

   $(document).ready(function(){
    const priceInputs = $('.price input');
    priceInputs.change(function(){
        if($(this).val() === ''){
            $(this).parents('.price').find('input').attr('readonly', false);
            $(this).attr('readonly', false);
        }else{
            $(this).parents('.price').find('input').attr('readonly', true);
        }
    });
});

but when i load a record which contains a value inside it the other field isn't automatically set to readonly

anyone got any ideas?

Answer 1

Use each loop for class elements.

 $('.price').each(function() { $(this).change(function() { console.log(this.value) if (this.value === '') { $('input[type="text"], textarea').attr('readonly', false); } else { $('input[type="text"], textarea').attr('readonly', 'readonly'); this.readOnly = false; } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="input1" class="price" /> <input type="text" name="input2" class="price" />

Answer 2

For changing the readonly property you should use prop() like below:

$("#name").prop('readonly', false);