使用 jQuery Mobile 时无法以编程方式选中复选框

问题描述 投票：0回答：1

我一直在尝试使用 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。这里的目标是，当我单击“课程”时，脚本将检查该课程所属项目的每个复选框。

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

为什么这不起作用？

编辑

这是日志：

the Log

<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>
javascript jquery jquery-mobile checkbox
1个回答
4
投票

经过以上评论，结论是：

$(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 Mobile 1.4.4 和 jQuery 1.11.0 jQuery mobile 编译器完全改变文档的 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>

它被渲染成类似的东西（在基本的小提琴中）：

状态 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>

它被渲染成类似的东西（在基本的小提琴中）：

如您所见，该复选框没有任何状态，其行为与其属性“已选中”不再相关。

为了解决这个问题，你必须做一些事情。

解决方案

现在，在继续之前，我想首先解释一个考虑因素：

因为您可能想要在将来（或者......好吧......也许只是现在！）获取该复选框的布尔值，我们将检查它并更改其选中属性。这是因为，如果您实际上只是针对 jQuery 移动 UI 将其设置为检查，那么如果您尝试获取其“检查属性”，则不会检查结果。

现在，我已经实现了以下功能，以便为您提供更舒适的 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（“不带 #”）传递给函数和状态（true 或 false）。

如果您想切换复选框的状态（如果为 false，则将其设置为 true，如果为 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/

请随意测试您需要的内容。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.