使用 jQuery 移动设备时无法以编程方式选中复选框

Question

我一直在尝试使用 jQuery 将一组复选框标记为已选中。我似乎无法弄清楚为什么。

Javascript:

function getProjects(course){

console.log("getProjects");
var data = {
  "fn" : "pLoad",
  "course" : course,
  "ajax" : "true"
};
$.ajax({
  type: "GET",
  url: SERVICE_URL, //Relative or absolute path to response.php file
  data: data,
  contentType: "application/json",
  success: function(response) {
    console.log("Recieved Projects!");
    console.log(response);
    var i, list = "";
        for (i = 0; i < response.length; i++) {
            var cid = "#" + response[i].name[0];
            console.log("setting checked: " + cid);
            console.log($(cid).length);
            $(cid).attr("checked");
        }
  }
});

}

HTML:

<td id="blockC" style="width:25%">
                <a href="#" id="expand" data-role="button" data-iconpos="notext" data-icon="arrow-l">Expand</a>
                <hr />

                <label for="core">Core</label>
                <input id="core" type="checkbox" value ="Core">

                <label for="adultScotland"> Adults(Scotland)</label>
                <input id="adultScotland" type="checkbox" value ="adultScotland">

                <label for="adultEngland">Adults(England)</label>
                <input id="adultEngland" type="checkbox" value ="adultsEngland">

                <label for="cFScotland"> Children and Families(Scotland)</label>
                <input id="cFScotland" type="checkbox" value ="cFScotland">

                <label for="cFEngland">Children and Families(England)</label>
                <input id="cFEngland" type="checkbox" value ="cFEngland">

                <label for="epilepsy"> Epilepsy</label>
                <input id="epilepsy" type="checkbox" value ="epilepsy">

                <label for="noCare">Non Care</label>
                <input id="noCare" type="checkbox" value ="noCare">

                <br />
                <hr />
                <br />
                    <form style="width:100%">
                    <input id="name" type="text" placeholder="Name" style="width:100%"/>
                    <input id="link" type="text" placeholder="Link" style="width:100%"/>
                    <a id="save" href="#" data-role="button">Save</a>
                    <a id="delete" href="#" data-role="button">Delete</a>
                    </form>
                </td>

从日志中我可以确认 cid 每次运行脚本时都在使用有效的 ID。此处的目标是当我单击 'course' 时，脚本将检查课程所属项目的每个复选框。

日志告诉我服务器正在返回正确的项目。

我不知道为什么这不起作用。任何帮助，将不胜感激。 :)

编辑

这是日志：

<head>
<title>Q learn App Edit</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>>
<script src="script.js"></script>
<style>
    table, th, td {
        border: 1px solid black;
    }
    td {
        padding: 15px;
    }
</style>
</head>

Answer 1

经过上面的评论，结论是：

$(cid).prop("checked", true);

如果它不起作用并且您使用的是 jQuery 1.6 以下版本，请尝试：

$(cid).attr("checked","checked");

或

$(cid).attr("checked", true);

如果它不起作用（虽然应该），只需使用纯 js 移动：

document.getElementById(response[i].name[0]).checked = true;

编辑！

现在，OP 提出这样的问题是绝对正确的，原因如下：

使用 jQuery 移动版 1.4.4 和 jQuery 1.11.0 jQuery 移动编译器完全改变了 HTML 您文档的结构！

简而言之，问题是：

块：

<label for="cFEngland">Children and Families(England)</label>
<input id="cFEngland" type="checkbox" value="cFEngland">

翻译成：

<div class="ui-checkbox">
   <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Children and Families(England)</label>
   <input id="cFEngland" type="checkbox" value="cFEngland" data-cacheval="true">
</div>

现在，经过几次测试，您无法定期切换输入值，因为该复选框的样式与 css 相关，而不是 html 或 js 相关。

简而言之，基本上有两种状态：

状态 1（复选框关闭）：

<div class="ui-checkbox">
   <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Children and Families(England)</label>
   <input id="cFEngland" type="checkbox" value="cFEngland">
</div>

呈现为类似的东西（在基本 fiddle 中）：

状态 2（复选框开启）：

<div class="ui-checkbox">
   <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on">Children and Families(England)</label>
   <input id="cFEngland" type="checkbox" value="cFEngland" data-cacheval="false">
</div>

呈现为类似的东西（在基本 fiddle 中）：

如您所见，该复选框没有任何状态，其行为与其属性 "checked" 无关。

为了解决这个问题，您需要做一些事情。

解决方案

现在，在继续之前，我想先在这里说明一个注意事项：

Because you may want, in the future (or... Well.. perhaps just now!) get the BOOLEAN value of that checkbox, we are going to check it and change its checked property. That is because if you actually just set it checked for the jQuery mobile UI, it will not result checked if you try to get its "checked property".

现在，继续，我已经实现了以下功能，让您可以更轻松地使用它 UI：

function setCheckboxStatus (id, status) {
    status == false ? $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-on").addClass("ui-checkbox-off") : $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-off").addClass("ui-checkbox-on");
    document.getElementById(id).checked = status;
}

function toggleCheckbox (id) {
    $('#'+id).parent().find("label[for="+id+"]").hasClass("ui-checkbox-on") ?$('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-on").addClass("ui-checkbox-off") : $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-off").addClass("ui-checkbox-on");

    document.getElementById(id).checked ^= 1;
}

function getCheckboxStatus (id) {
 return $('#'+id).prop("checked");   
}

令人惊讶的是，如果您手动单击复选框，它会切换其状态，因此您可以使用 getCheckboxStatus 函数获取其值。

否则，如果您想手动设置复选框值，请使用舒适函数 setCheckboxStatus，将 ID ("without #") 传递给函数和状态（true 或 false).

如果您想切换复选框的状态（如果为假则设置为真，如果为真则设置为假），请使用舒适的函数 toggleCheckbox（传递 ID，始终不带“#”）。

因此，在您的情况下，您必须将代码更改为该代码（粘贴函数后）。

function getProjects(course){

console.log("getProjects");
var data = {
  "fn" : "pLoad",
  "course" : course,
  "ajax" : "true"
};
$.ajax({
  type: "GET",
  url: SERVICE_URL, //Relative or absolute path to response.php file
  data: data,
  contentType: "application/json",
  success: function(response) {
    console.log("Recieved Projects!");
    console.log(response);
    var i, list = "";
        for (i = 0; i < response.length; i++) {
            setCheckboxStatus(response[i].name[0], true);
        }
  }
});

}

出于测试目的，我做了这个：

http://jsfiddle.net/2gh1qfoo/5/

随时测试您需要的内容。

另一种可能的解决方案是在复选框上触发"click"事件，但在IE9上可能会有一些奇怪的结果，所以这似乎是最清晰和跨浏览器的解决方案。

使用 jQuery 移动设备时无法以编程方式选中复选框

Unable to programatically check a checkbox when using jQuery Mobile

javascript

checkbox

jquery

jquery-mobile

状态 1（复选框关闭）：

状态 2（复选框开启）：

解决方案