Disable vs readonly dont work for non-interactive but value keeper input

Question

I am developing some web interfae, I would like to convert some INPUT elements in non-editable/non-changable but still showing the inputed value. How an be this done?

In Chrome at least, disabled attribute makes the inputed value disappear (unmarked checkboxes, non-filled radio buttons) but readonly label allows user to keep changing values. Why? Is this a Chrome thing? Whats the best wa for simply not-allowing interaction but mantaining and showing the preselected value so far?

EDIT: I am using jQuery´s

$('#deForm :input').attr('readonly',true);

and

$('#deForm :input').attr('disabled',true);

for this test. Both seem to be handled ok, since GUI shadows input elements. But none of them shows my expected functionality

EDIT2: I also tried to put 'readonly' and 'disabled' as the second argument in jQuery instead of 'true' but it has same effect

EDIT3: I also tried to add to readonly.

 $('#deForm :input').attr('readonly',true);
 $('#deForm :input').keypress(function(event){
      event.preventDefault();
 });

but behavior is the same as in plain readonly

Answer 1

This is the default behavior of the readonly and disabled properties. You can use the preventDefault method of the event object.

<input type='text' value='something'/>

$('input[type=text]').keypress(function(event){
    if (something is true) {
       event.preventDefault()
       // or return false
    } else {
       //
    }
}) 

http://jsfiddle.net/2fKjX/

Answer 2

I know you said readonly didn't work, but I'm guessing you made a mistake on the syntax. What you want is this:

<input type="text" readonly="readonly" value = "Hi ima txtbox" id="whatever" class="whatever" />