3

Good day all. I've a page with a form, there is a option (a checkbox) that MUST be checked in order to submit the form, so basically there is a simple javascript like this:

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

binded on the submit event. This work pretty fine, but on some mobiles, the checkbox isn't updated, so this happen:

the form is submitted (the checkbox IS ticked, but shown as unticked). landing on the next page, and hitting the back button, the checkbox is now showed as ticked. I have done a number of test and I'm prett sure is a matter of "updating the DOM" or something that simply does not render the new "visual" of the checkbox.

anyone has a hint on how to solve this issue?

is there a way to force the render of an element, via js?

Note that this is actually working on most devices.

one of the devices that has this issue is Samsung ACE, using the stock browser.

all the phones that has this issue, are somehow dated.

the issue is present on android phones mostly, with 2.3.3 or less.

I have try this: function 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");

with no luck actually.

the HTML is:

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

The 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;
}
Matteo Bononi 'peorthyr'
  • 2,071
  • 7
  • 38
  • 87
  • form submission causes in a page reload so changes made to inputs resets. – Jai Jul 21 '16 at 12:44
  • Maybe your function get's called to early? If you say some browsers don't let check it, can you reduce it to a specific render engine? – prizm1 Jul 21 '16 at 12:50
  • no, is not easy to reproduce and check the render engine, I have to wait for someone that is on another timezone in order to be able to test it (yes, it is a nonsense) what I saw is that dated mobile phones has this behaviour, I believe android < 3.5 (but it is a guess). – Matteo Bononi 'peorthyr' Jul 21 '16 at 12:57
  • Have you tried $('.classname').is(':checked') and post your html. Could be an error in your html code. – Nitin Jul 21 '16 at 14:42
  • if I test the checkbox in jquery (or js) it "works" meaning that js see it as checked, but the checkbox appear unmarked. – Matteo Bononi 'peorthyr' Jul 21 '16 at 14:44
  • Is the css for the checkbox customized? – Nitin Jul 21 '16 at 14:48
  • yes, I have now noticed that the CSS customize the checkbox, adn that could be the problem, I'll post the css in a minute – Matteo Bononi 'peorthyr' Jul 21 '16 at 14:49
  • Maybe this has to do with the form auto complete in the browser, where it remembers the values of form fields on previous page views? See [How do you disable browser Autocomplete on web form field / input tag?](http://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag) for more info. – Greg Burghardt Jul 21 '16 at 14:51
  • are you using Material design? – Nitin Dhomse Jul 21 '16 at 14:55
  • no, all straight (just jQuery) tbut the progect is very old and many ppl have put hands on it :/ – Matteo Bononi 'peorthyr' Jul 21 '16 at 14:56

1 Answers1

0

If you are using Google material design, add "is-checked" class to element's parent, as 

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

to render visualisation. hope this will work!

Nitin Dhomse
  • 2,390
  • 1
  • 10
  • 22