CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EnexoOnoma
EnexoOnoma

Reputation: 8836

How to make textboxes readonly based on drop down selection?

I have the following scripts that it puts the data-length and data-width on textbox based on drop down question

My question is how I make the .width and .length textboxes readonly based on dropodown selection as below?

$(document).ready(function() {
    $('select.cargo_type').change(function() {
        var eur1width = $('select.cargo_type').find(':selected').data('width');
        $('.width').val(eur1width);

        //make width textbox readonly

        var eur1length = $('select.cargo_type').find(':selected').data('length');
        $('.length').val(eur1length);

        //make length textbox readonly
    });
});

Upvotes: 0

Views: 562

Answers (2)

sanjeev shetty
sanjeev shetty

Reputation: 458

Use prop('readonly',true/false); on the element. Like,

if(eur1width == 'checking_val'){
   $('.width').val(eur1width).prop('readonly', true);
}else{
   $('.width').val(eur1width).prop('readonly', false);
}

OR

To toggle the property

   $('.width').val(eur1width).prop('readonly', !$(this).prop('readonly'));

Upvotes: 1

Tushar
Tushar

Reputation: 87203

You can use prop to set textbox readonly.

$('.width').val(eur1width).prop('readonly', true);

$('.length').val(eur1length).prop('readonly', true);

To remove readonly you can set the readonly property to false;

$('.width').val(eur1width).prop('readonly', false);

$('.length').val(eur1length).prop('readonly', false);

UPDATE

if (eur1width == 'myVal') {
    $('.width').val(eur1width).prop('readonly', true);
} else {
    $('.width').val(eur1width).prop('readonly', false);
}

Upvotes: 1

Related Questions