Demo for Readonly Attributes

Both the disabled and readonly attributes for an input prevent the user from modify it. However, the disabled attribute means this input will NOT be sent within the POST request, whereas the readonly one means it will.

Nevertheless, for checkbox, radio and select tags it doesn't happen. To support the readonly attribute for these tags, the corresponding helpers have been adapted to behave as would be expected. To do that, when the readonly attribute appears the helper will:

• add an additional disabled attribute
• add an additional <input type="hidden"> with the desired value
• wraps them with in a div (with class checkbox-group, radio-group or select-group)

Note it only happens when the readonly attribute is present, even with a false value. It is done to make it easier to modify its readonly behaviour using javascript.

@b4.text( fooForm("text"), '_label -> "Always editable", '_class -> "always-editable", 'value -> "demo text", 'placeholder -> "A simple text..." )
@b4.checkbox( fooForm("checkbox"), '_text -> "Checkbox", 'value -> true, 'readonly -> true )
@b4.radio( fooForm("radio"), options = Seq("M"->"Male","F"->"Female"), 'value -> "M", '_label -> "Radio Group", 'readonly -> true )
@b4.select( fooForm("select"), options = fruits, '_label -> "Select", 'value -> "A", 'readonly -> true )
@b4.free() {
  <button type="submit" class="btn btn-secondary"><i class="fa fa-ok"></i> Submit me!</button>
  <a class="btn btn-primary btn-readonly-unlock locked">Unlock readonly fields</a>
}