javascript - Grey out and make text box read only using jquery -

hi want make text box turn grey , made read when checkbox ticked. able text box made read not turn grey. use disabled attribute, need value of text box still sent disabled attribute can not used here returns null value.

jquery(document).ready(function () {    $("#redflag2").click(function () {       $('#new_contracted_support_hours').attr("readonly", $(this).is(":checked"));       $('#new_contracted_support_hours').addclass("greyba", $(this).is(":checked"));   }); }); 

css

.greyba{     background-color:rgba(178,178,178,1.00);  } 

it should addclass() not addclass() class not added.

you should use .prop() set properties , toggleclass(),

as of jquery 1.6, .prop() method provides way explicitly retrieve property values, while .attr() retrieves attributes.

jquery(document).ready(function () {     $("#redflag2").change(function () {            $('#new_contracted_support_hours')             .prop("readonly", this.checked)             .toggleclass("greyba", this.checked);     }); }); 

a read .prop() vs .attr()