Grey out and make text box read only using jquery

Question

Hi i want to make a text box turn grey and be made read only when a checkbox is ticked. Currently i am able to get the text box to be made read only but will not turn grey. I would usually use the disabled attribute, however i need the value of the text box still to be sent so the disabled attribute can not be used here as it returns a 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);

}

can't you make text color as `rgba(178,178,178,1.00)` rather than bkgrdcolor? — rt2800, Jul 15 '15 at 10:26

ozil · Answer 1 · 2015-07-15T10:41:26.223

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

$("#redflag2").click(function () {
$('#new_contracted_support_hours').attr("readonly", $(this).is(":checked"));
if ($(this).is(":checked")) {
    $('#new_contracted_support_hours').addClass("greyba");
}
else{
    $('#new_contracted_support_hours').removeClass("greyba");
}
});

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

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="new_contracted_support_hours" type="text"></input>
<input id="redflag2" type="checkbox"></input>

score 1 · Accepted Answer · edited May 23 '17 at 12:21

It should be addClass() not addclass() thus class was not added.

You should use .prop() to set properties and toggleClass(),

As of jQuery 1.6, the .prop() method provides a way to 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 good read .prop() vs .attr()

SW4 · Answer 3 · 2015-07-15T10:36:07.693

Why not separate your concerns more clearly, leaving JS for functionality and CSS for styling? As you are usilising the readonly attribute, zero styling intervention is required in your Javascript.

nb. Implementation is indicative only

function setState(){
  document.getElementById('field').readOnly = document.getElementById('checkbox').checked;
}
$('#checkbox').on('change', setState); // set state on checkbox change
setState(); // set state on initial load

#field[readonly] {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkbox" type="checkbox" />
<input id="field" type="text" value="value.." />

@Satpal - its indicative only, and the main reason being the revision (see updated) — SW4, Jul 15 '15 at 10:36

score 0 · Answer 4 · edited Jul 15 '15 at 10:58

0

<input type="text" id="viewers" name=""/>

You can make readonly by this by using:

$('#viewers').attr('readonly', true);
$('#viewers').css('background-color' , '#DEDEDE');

edited Jul 15 '15 at 10:58

Jim Jeffries

9,841
15
62
103

answered Jul 15 '15 at 10:36

Dilip Soni

1
2

Grey out and make text box read only using jquery

4 Answers4