“旧款”手机在通过JavaScript勾选复选框时不会显示复选框的勾选标记。

Question

大家好。 我有一个带有表单的页面，其中有一个选项（复选框）必须被选中才能提交表单，因此基本上有一个类似于这样的简单 JavaScript：

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

在提交事件上绑定。 这个功能很好，但是在一些手机上，复选框没有被更新，所以会出现以下情况：

表单已提交（复选框被勾选，但显示为未被勾选）。 着陆到下一个页面，然后点击返回按钮，复选框现在显示为勾选状态。 我已经进行了多次测试，我非常确定这是“更新DOM”或某些东西不渲染复选框的新“视觉效果”的问题。

有人知道如何解决这个问题吗？

是否有一种通过js强制呈现元素的方法？

请注意，这实际上在大多数设备上都可以使用。

其中一个存在此问题的设备是使用默认浏览器的三星ACE。

所有存在此问题的手机都比较旧。

此问题主要存在于Android手机中，版本为2.3.3或更低。

我尝试了这个：

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");

很遗憾，实际上没有成功。

HTML如下：

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

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'

---

表单提交会导致页面重新加载，因此输入框中所做的更改将被重置。 - Jai

也许你的函数被调用得太早了？如果你说有些浏览器不允许检查它，你能将其缩小到特定的渲染引擎吗？ - prizm1

不，要复制和检查渲染引擎并不容易，我必须等待另一个时区的人来测试它（是的，这是无意义的）。 我看到的是旧的手机有这种行为，我相信 Android < 3.5（但这只是猜测）。 - Matteo Bononi 'peorthyr'

你尝试过使用$('.classname').is(':checked')并发布你的HTML吗？可能是你的HTML代码出现了错误。 - Nitin

如果我在jQuery（或JS）中测试复选框，则“有效”，这意味着JS将其视为已选中，但复选框未被标记为选中。 - Matteo Bononi 'peorthyr'

Answer 1

如果您正在使用Google Material Design，请将“is-checked”类添加到元素的父级，如下所示：

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

进行可视化渲染。希望这能够起作用！

- Nitin Dhomse

---

不试试怎么知道呢，我会告诉你的！:D - Matteo Bononi 'peorthyr'