Christoph: HTML Formular Locked / ReadOnly

Beitrag lesen

Hallo,

ich musste ein Formular ReadOnly machen. ReadOnly ist bei uns nicht das selbe wie disabled.
Auswahlliste, Checkbox und Radiobutton reagieren bei ReadOnly etwas anders als erwartet, da
die Werte ja nicht geändert werden, wenn etwas anderes ausgewählt.

Mit CSS funktioniert es leider nicht, dass oben genannte Komponenten disabled =true gesetzt werden,
sie jedoch nicht grau hinterlegt sind. (weiters sieht man bei der auswahlliste nicht, welche
auswahlmöglichkeiten es gibt)

Anbei mein Vorschlag wie combobox, radio und checkbox locked (also readonly) gemacht werden können.

hoffe es hilft

Christoph

p.s.: das 'R' kommt von JSF zur Laufzeit
p.p.s.: ja man kann das alles 'hacken'. wir brauchen es nur, dass in der "readonly" Ansicht die Werte nicht versehentlich verändert werden und ein Formular (das es nicht gibt) ausgedruckt wird.

<HTML>
 <HEAD>
 <script>
 function radioReadOnly(_id, _R){
  radios = document.getElementsByName(_id);
 if(_R=='R') {
   for (i = 0; i < radios.length; i++) {
    if(radios[i].defaultChecked==true) {
     radios[i].checked=true;
     document.ef1.t1.value='t';
    }
    else{
    radios[i].checked=false;
    }
   }
  }
}

function comboboxReadOnly(_id, _R){
var comboBox=document.getElementsByName(_id)[0];
 if(_R=='R') {
   for (i = 0; i < comboBox.length; i++) {
    if (comboBox[i].defaultSelected==true) {
      comboBox[i].selected=true;
    }
    else{
     comboBox[i].selected=false;
    }
   }
  }
}
</script>
<body>
<select
 name="abcdefg" size="1"  onchange="comboboxReadOnly(this.name,'R')" >
  <option  value="accord">Honda Accord</option>
  <option value="4runner">Toyota 4Runner</option>
  <option    selected value="nissan-z">Nissan Z350</option>
</select>
<br>
<table>
<tr>
<td>
<label for="form:page1:_9"><input type="radio" name="form:page1:_9" onblur="radioReadOnly(this.name,'R')" onchange="radioReadOnly(this.name,'R')" onclick="radioReadOnly(this.name)" value="nicht erhoben">nicht erhoben</label></td>
 </tr>
 <tr>
<td>
<label for="form:page1:_9"><input type="radio" name="form:page1:_9" onblur="radioReadOnly(this.name,'R')" onchange="radioReadOnly(this.name,'R')" onclick="radioReadOnly(this.name)" value="unauff&auml;llig">unauff&auml;llig</label></td>
 </tr>
 <tr>
<td>
<label for="form:page1:_9"><input type="radio" checked="true" name="form:page1:_9"  onblur="radioReadOnly(this.name,'R')" onchange="radioReadOnly(this.name,'R')" onclick="radioReadOnly(this.name,'R')" value="Komplikationen">Komplikationen</label></td>
 </tr>
</table>
<br>
<table>
<tr>
<td class="panelGridColumn01"><input id="form:page1:_13" type="checkbox" name="form:page1:_13" checked class="selectBooleanCheckbox" onclick="if('R'=='R') eval('this.checked = ! this.checked')" /></td>
<td class="panelGridColumn02"><span id="form:page1:label_13" class="outputText">checkboxesT1</span></td>

</tr>
<tr>
<td class="panelGridColumn01"><input id="form:page1:_14" type="checkbox" name="form:page1:_14" class="selectBooleanCheckbox" onclick="if('R'=='R') eval('this.checked = ! this.checked')" /></td>
<td class="panelGridColumn02"><span id="form:page1:label_14" class="outputText">checkboxesT2</span></td>
</tr>
</table>

<input type="text" name="input" value="abcdefg" readonly="readonly"/>

</HTML>