0
我有多个复选框，这些复选框是基于jsp中具有两个参数ID（它是文本框的ID）和密钥的核心标记的foreach循环从集合中迭代而形成的。 Id和密钥基于迭代动态填充。 Oncheck，它调用一个函数具有AJAX代码和响应从ajax这是一个JSON和JSON填充动态基于密钥的同一div。我使用类似于你可以找到的tabed视图， https://www.w3schools.com/howto/howto_js_tabs.asp。这些标签也由复选框的ID动态控制。如果复选框被点击，按钮是可见的，反之亦然（注意：按钮也会触发ajax调用）我现在面临的问题是，如果我禁用复选框，div保留旧键的值。我知道这个问题是我code.Can的设计中的任何一个说怎么能重新designed.I将附加的代码以供参考：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';
}
功能openError（键）{
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代码：
FILE：
<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>