我有多个复选框,这些复选框是根据jsp中核心标记的foreach循环从集合中迭代形成的,带有两个参数ID(文本框的id)和密钥。两个ID和密钥都填充了动态地基于迭代。在Oncheck上,它调用一个具有AJAX代码的函数。来自ajax的响应,这是一个JSON,JSON根据密钥在相同的div上动态动态。我正在使用标签视图类似于您在Compose
中可以找到的内容。这些选项卡也由id的复选框动态控制。如果单击复选框,则按钮可见,反之亦然。(注意:按钮也会触发ajax调用)我现在面临的问题是,如果我禁用复选框,则div保留旧密钥的值。我知道问题在于我的代码设计。任何人都说如何重新设计。我会附上代码供参考:
function enableButton(id, key) {
openError(key);
if (!flag) {
document.getElementById("resultTab").style.display = 'block';
}
if (flag){
document.getElementById(id).checked = false;
}
var lastCharacterOfId = document.getElementById(id).id.charAt(document
.getElementById(id).id.length - 1);
var checkBox = document.getElementById(id);
var button = document.getElementById("btn_" + lastCharacterOfId);
if (checkBox.checked) {
$("#good").html('');
button.style.display = 'block';
button.disabled = false;
counterForScript++;
//openError(key);
} else {
$("#good").html('');
button.style.display = 'none'
button.disabled = true;
if(!flag){
counterForScript--;
}
if (counterForScript > 0) {
console.log(checkBoxKeyArray[counterForScript]);
}
}
if (counterForScript == 0) {
document.getElementById("resultTab").style.display = 'none';
}
function openError(key){
if ($("#aFile").get(0).files.length == 0) {
alert("Please select a file ");
flag = true;
return false;
}
if ($("#aFile").val().substring($("#aFile").val().lastIndexOf(".") + 1,
$("#aFile").val().length) != 'log') {
alert("Please select only Log Files");
flag = true;
return false;
}
$("#good").html('');
var length = 0;
$(document)
.ready(
function() {
$.ajax({
type : "POST",
enctype : 'multipart/form-data',
url : "uploadServlet",
data : formData,
processData : false,
contentType : false,
cache : false,
timeout : 600000,
dataType : 'json',
success : function(data) {
$("#good").append("<br><span align=\"left\" style=\"margin-left:1%\">Total Number of occurences of the search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
+ key
+ "</font>: "
+ data.length
+ "</span>");
if (data.length > 0) {$("#good").append(
"<p align=\"left\" style=\"margin-left:1%;margin-top:4%\">Your search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
+ key
+ "</font> can be found in Line Numbers:");
}
$
.each(
data,
function(id,
element) {
$("#good")
.append(
"<span style=\"margin-left:1%;\">"
+ element
+ "</span></p>");
});
},
});
});
}
HTML代码:
文件:
<p>
<font style="font-weight: bold;">SEARCH:</font>
<c:forEach var="hm" items="${logAnalysisHashMap}">
<c:set var="count" value="${count + 1}" scope="page" />
<input type="checkbox" id="cb_${count}"
onchange="enableButton(this.id,'${hm.key}');" />
<font style="font-weight: bold; text-transform: uppercase;">
${hm.key} </font>
</c:forEach>
</p>
</div>
<div class="tab" id="resultTab"
style="width: 90%; margin-left: 5%; height: 40%; margin-top: 2%; position: relative; overflow: auto; display: none">
<div style="display: block; clear: both;">
<c:forEach var="hm" items="${logAnalysisHashMap}">
<c:set var="countbtn" value="${countbtn + 1}" scope="page" />
<button class="tablinks" id="btn_${countbtn}"
onclick='openError("${hm.key}");' style="display: none;"
disabled>
<font style="font-weight: bold; text-transform: uppercase;">${hm.key}
</font>
</button>
</c:forEach>
</div>
答案 0 :(得分:0)
我现在面临的问题是,如果我禁用复选框,div会保留旧密钥的值。
您可以使用change
的jQuery checkbox
事件,并在禁用该复选框时删除其值。例如 -
$(document).ready(function() {
$('#checkbox1').change(function() { //Detecting change!!
if(this.checked) { //When checkbox is clicked
var returnVal = confirm("Are you sure?");
}
else{
//check box is unchecked!!
//Remove your div key value..
}
});
});
有关.change()
(jQuery)