2016-07-21 7 views
3

Guten Tag alle. ich eine Seite mit einem Formular haben, gibt es eine Option ist (ein Kontrollkästchen), die in überprüft werden, muss das Formular abzusenden, gibt also im Grunde ist ein einfaches Javascript wie folgt aus:"alte" Telefone zeigen das Checkbox-Häkchen nicht, wenn über Javascript geprüft wird

function checkbox_tick_action(){ 
$("#mt-container #option").prop('checked',true); 
$("#mt-container #option").attr('checked','checked'); 
console.log("ticked"); 
} 

auf die binded einreichen Veranstaltung. Diese Arbeit ziemlich gut, aber auf einige Handys, ist das Kontrollkästchen nicht aktualisiert, so dass dies geschehen:

das Formular abgeschickt wird (das Kontrollkästchen aktiviert, sondern als unticked gezeigt). Wenn Sie auf der nächsten Seite landen und die Zurück-Taste drücken, wird das Kontrollkästchen nun als angekreuzt angezeigt. Ich habe eine Reihe von Tests gemacht und ich bin sicher, es ist eine Frage der "Aktualisierung des DOM" oder etwas, das einfach nicht das neue "visuelle" der Checkbox macht.

hat jemand einen Hinweis, wie man dieses Problem löst?

Gibt es eine Möglichkeit, das Rendern eines Elements über js zu erzwingen?

Beachten Sie, dass dies tatsächlich auf den meisten Geräten funktioniert.

eines der Geräte, die dieses Problem hat, ist Samsung ACE, mit dem Stock-Browser.

alle Telefone, die dieses Problem hat, sind irgendwie veraltet.

das Problem ist auf Android-Handys meist vorhanden, mit 2.3.3 oder weniger.

Ich habe diese versuchen: Funktion checkbox_tick_action() {

$("#mt-container #option").prop('checked',true); 
$("#mt-container #option").attr('checked','checked'); 
var opt = document.getElementById('option'); 

opt.style.display='none'; 
opt.offsetHeight; 
opt.style.display='block'; 
console.log("tick 2"); 

ohne Glück tatsächlich.

die HTML ist:

<input type="checkbox" name="option" id="option" value="true" data-tid="checkBox"> 

Die CSS:

#mt-container input:not(checked) + label:before { 
border: 1px solid #3E3E3E; 
background-color: #EFEFEF; 
content: "\00a0"; 
display: inline-block; 
width: 14px; 
height: 14px; 
font-size:15px; 
line-height: 15px; 
} 
#mt-container input:checked + label:before { 
border: 1px solid #3E3E3E; 
background-color: #EFEFEF; 
color: #3E3E3E; 
content: "\2714"; 
font-size: 15px; 
text-align: center; 
line-height: 15px; 
font-weight: bold; 
} 

#mt-container input:checked, #mt-container input:not(checked) { 
position:absolute; 
top:-500px; 
left:-900px; 
} 
+0

Formular Übermittlung verursacht in einer Seite neu zu laden, so Änderungen an Eingaben zurückgesetzt. – Jai

+0

Vielleicht wird Ihre Funktion zu früh aufgerufen? Wenn Sie sagen, einige Browser lassen es nicht überprüfen, können Sie es auf eine bestimmte Render-Engine reduzieren? – prizm1

+0

nein, ist nicht einfach zu reproduzieren und überprüfen Sie die Render-Engine, ich muss auf jemanden warten, der auf einer anderen Zeitzone ist, um es zu testen (ja, es ist ein Unsinn) was ich sah, ist das datierte Handys hat dieses Verhalten, glaube ich Android <3,5 (aber es ist eine Vermutung). –

Antwort

0

Wenn Sie mit Google-Material-Design, fügen Sie "ist geprüft" Klasse des Elements Eltern, als

$("#option").parent().addClass("is-checked"); 

Rendering Visualisierung. hoffe, das wird funktionieren!

+0

versuchen Sie nicht weh, ich werde Sie wissen lassen! : D –

+0

nein, es hat nicht funktioniert. –