08.06.2010, 14:17
|
|||
|
|||
[WIP]jQuery Code als Anfänger selber schreiben - benötige Hilfe
Nach langem Copy & Paste von jQuery Code und simplem Abändern von Eventhandlern oder Selektoren, möchte ich jetzt mal versuchen, selber ein kleines Script zu erarbeiten.
Folgendes möchte ich erreichen: Ich habe ein Formular mit einer Checkbox und mehreren input-Feldern. Die Input-Felder sind in zwei Gruppen unterteilt, Gruppe 1 und 2 - beide mit gleicher Anzahl an Feldern. Wenn die Checkbox nicht angeklickt ist, soll Gruppe 2 leer sein, so dass der User selber etwas eingeben kann. Wenn die Checkbox angeklickt ist, soll Gruppe 2 die gleichen Werte wie Gruppe 1 haben und zusätzlich noch auf readonly gesetzt werden. Der erste Schritt wäre also zu überprüfen, ob die Checkbox angeklickt ist und dann sich um die beiden Gruppen zu kümmern. So sieht der Code aus. Code:
<script type="text/javascript">
$(document).ready(function() {
if( $('#checkbox').attr('checked')){
$('#gruppe1-feld1').change(function() {
$('#gruppe2-feld1').val($(this).val());
});
}
}
|
| Sponsored Links |
|
08.06.2010, 14:38
|
|||
|
|||
|
Er muss das ja bei jedem Click überprüfen, also musst du es auf den Click Event nehmen, in etwa so:
Code:
<script type="text/javascript">
$(document).ready(function() {
$('#checkbox').click(function() {
// if abfrage
if( $(this).attr('checked')){
// checked
} else
// unchecked
}
});
}
|
| Sponsored Links |
|
08.06.2010, 15:55
|
|||
|
|||
|
Danke dir! Habe es jetzt fast so gelöst wie deinen Vorschlag. Ich habe vergessen zu erwähnen, dass die beiden Gruppen in verschiedenen Schritten unterteilt sind <div id="step1">inputfelder+submitbutton um zu Schritt/Gruppe 2 zu springen</div><div id="step"></div> usw.
Code:
$('#submit1').click(function() {
if( $('#checkbox').attr('checked')){
$('#rechnung1').val($('#liefer1').val()).attr({readonly: "readonly"});
$('#rechnung2').val($('#liefer2').val()).attr({readonly: "readonly"});
$('#rechnung3').val($('#liefer3').val()).attr({readonly: "readonly"});
$('#rechnung4').val($('#liefer4').val()).attr({readonly: "readonly"});
$('#rechnung5').val($('#liefer5').val()).attr({readonly: "readonly"});
$('#rechnung6').val($('#liefer6').val()).attr({readonly: "readonly"});
$('#rechnung7').val($('#liefer7').val()).attr({readonly: "readonly"});
$('#rechnung8').val($('#liefer8').val()).attr({readonly: "readonly"});
$('#rechnung9').val($('#liefer9').val()).attr({readonly: "readonly"});
$('#rechnung10').val($('#liefer10').val()).attr({readonly: "readonly"});
$('#rechnung11').val($('#liefer11').val()).attr({readonly: "readonly"});
}
else {
$('#rechnung1').val('').removeAttr("readonly");
$('#rechnung2').val('').removeAttr("readonly");
$('#rechnung3').val('').removeAttr("readonly");
$('#rechnung4').val('').removeAttr("readonly");
$('#rechnung5').val('').removeAttr("readonly");
$('#rechnung6').val('').removeAttr("readonly");
$('#rechnung7').val('').removeAttr("readonly");
$('#rechnung8').val('').removeAttr("readonly");
$('#rechnung9').val('').removeAttr("readonly");
$('#rechnung10').val('').removeAttr("readonly");
$('#rechnung11').val('').removeAttr("readonly");
}
});
 .(Ich schätze mal irgendwie nach oben zählen bis <= 11 und dann aufhören ... Wie gesagt ich werde später ausführlich darüber nachdenken  Danke vielmals ! Das hat mich jetzt sehr motiviert, so lächerlich das Script auch ist  !)/edit: Code:
$('#submit1').click(function() {
if( $('#checkbox').attr('checked')){
$('#rechnung1').val($('#liefer1').val()).attr({readonly: "readonly"});
$('#rechnung2').val($('#liefer2').val()).attr({readonly: "readonly"});
$('#rechnung3').val($('#liefer3').val()).attr({readonly: "readonly"});
$('#rechnung4').val($('#liefer4').val()).attr({readonly: "readonly"});
$('#rechnung5').val($('#liefer5').val()).attr({readonly: "readonly"});
$('#rechnung6').val($('#liefer6').val()).attr({readonly: "readonly"});
$('#rechnung7').val($('#liefer7').val()).attr({readonly: "readonly"});
$('#rechnung8').val($('#liefer8').val()).attr({readonly: "readonly"});
$('#rechnung9').val($('#liefer9').val()).attr({readonly: "readonly"});
$('#rechnung10').val($('#liefer10').val()).attr({readonly: "readonly"});
$('#rechnung11').val($('#liefer11').val()).attr({readonly: "readonly"});
}
else {
$('#rechnung1, #rechnung2, #rechnung3, #rechnung4, #rechnung5, #rechnung6, #rechnung7, #rechnung8, #rechnung9, #rechnung10, #rechnung11').val('').removeAttr("readonly");
}
});
 .
Geändert von accessoire (08.06.2010 um 16:14 Uhr)
|
|
08.06.2010, 16:21
|
|||
|
|||
|
Für das removen kannst du den Input Feldern ja eine Klasse geben z.B. "rechnung" bzw. "liefer" und mit
Code:
$('.rechnung').val('').removeAttr("readonly");
Für den Value setzten machst du ganz einfach: Code:
// variable i = 1
// loopen solange i <= 11
// nach jedem durchlauf i um 1 erhöhen
for(var i = 1; i <= 11; i++) {
$('#rechnung'+i).val($('#liefer'+i).val()).attr({readonly: "readonly"});
}
|
|
09.06.2010, 09:07
|
|||
|
|||
|
Genial, danke
! Hast mir sehr geholfen!So langsam werde ich warm mit JavaScript & jQuery .
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Ich benötige mal BITTE BITTE dringend Eure Hilfe | McDoyle | CSS | 5 | 01.03.2007 10:44 |
| benötige kurz hilfe in css (links) | playaz | CSS | 3 | 31.10.2006 16:50 |
| hilfe bzw anregung bezüglich code und aufbau | flow | CSS | 0 | 23.11.2005 16:13 |
| Fixierter Hintergrund-Kein Code funktioniert bei mir!! Hilfe | Triforce | CSS | 4 | 16.12.2004 13:44 |
Linear-Darstellung
