我有多行复选框。由于我已经发布了问题，如何根据复选框状态启用或禁用图标。 https://stackoverflow.com/questions/36549999/how-to-enable-or-disable-a-image-based-on-the-checkbox-value-in-javascript?noredirect=1#comment60702059_36549999 我的解决方案是什么，为所有行中的每个复选框提供相同的类。添加每行共有的用户定义属性并与行图标建立关系。
我试过下面的代码
//html
<tr>
<td style="text-align: left;">Summary/td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="SummaryEditIcon"></td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="SummaryEditIcon"></td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="SummaryEditIcon"></td>
<td><a id="SummaryEditIcon"><img href="#"></a></td>
</tr>
<tr>
<td style="text-align: left;">Model/td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="ModelEditIcon"></td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="ModelEditIcon"></td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="ModelEditIcon"></td>
<td><a id="ModelEditIcon"><img href="#"></a></td>
</tr>
// js
$(".allCheckboxes").unbind.change(function(){
var editIconId =$(this).attr("data-editIcon");
if ($(this).prop("checked")) {
$("#"+editIconId).removeAttr("disabled");
}
else{
$("#"+editIconId).prop("disabled",true);
checkAndEnableEditIcon(editIconId);
}
});
});
function checkAndEnableEditIcon(editIconId)
{
var count = 0;
$(".allCheckboxes").each(function(){
if($(this).attr("data-editIcon") == editIconId)
{
count++;
if ($(this).attr("checked")) {
$("#"+editIconId).removeAttr("disabled");
return;
}
}
if(count == 3)
{
return;
}
});
}
上面的代码无效..我无法识别问题。任何人都可以解决这个问题。
答案 0 :(得分：0)
在许多方面看起来很多事都是错误的。首先看：
/td>在第一个单元格上都是不正确的。更改为</td>。.unbind()，而不仅仅是.unbind $(".allCheckboxes")。你的意思是$(".allchecks")？不确定这是否是您的意图：https://jsfiddle.net/Twisty/Lw7nvgsr/
<强> HTML
<table>
<tr>
<td style="text-align: left;">Summary</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="SummaryEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="SummaryEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="SummaryEditIcon">
</td>
<td>
<a id="SummaryEditIcon"><img href="#"></a>
</td>
</tr>
<tr>
<td style="text-align: left;">Model</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="ModelEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="ModelEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="ModelEditIcon">
</td>
<td>
<a id="ModelEditIcon"><img href="#"></a>
</td>
</tr>
</table>
<强> JQuery的
$(document).ready(function() {
$(".allchecks").unbind().change(function() {
var editIconId = $(this).attr("data-editIcon");
if ($(this).prop("checked")) {
console.log("Enabling " + editIconId);
$("#" + editIconId).removeAttr("disabled");
} else {
console.log("Disabling " + editIconId);
$("#" + editIconId).prop("disabled", true);
checkAndEnableEditIcon(editIconId);
}
});
function checkAndEnableEditIcon(editIconId) {
var count = 0;
$(".allchecks").each(function() {
if ($(this).attr("data-editIcon") == editIconId) {
count++;
if ($(this).attr("checked")) {
$("#" + editIconId).removeAttr("disabled");
return;
}
}
if (count == 3) {
return;
}
});
}
});
即使有了这些变化，我怀疑这些变化都没有按照你想要的方式运行，这更像是一个逻辑问题，而不是代码问题。您在其他帖子中说明了＆＃34; 如果选中任何一个复选框，则必须显示该对应行上的图像。＆＃34;在我多次阅读之前，这对我来说并没有多大意义。我想你的意思是，如果选中该行中的任何一个复选框，则在更改事件之后，该行的图像将变为可见。
为了得到这个，你应该听取上一篇文章中的建议： 1）如何获得复选框的价值？ 2）如何隐藏/显示图像？在SO或Google上搜索它们 - 有很多答案。 - Alexander Trakhimenok 。检查每个复选框的值，然后显示/隐藏图像。这是一种方法：
https://jsfiddle.net/Twisty/Lw7nvgsr/4/
<强> HTML
<table>
<tr>
<td style="text-align: left;">Summary</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="SummaryEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="SummaryEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="SummaryEditIcon">
</td>
<td>
<a id="SummaryEditIcon" href="#"><img src="https://cdn0.iconfinder.com/data/icons/business-finance-11/100/icon-37-128.png" /></a>
</td>
</tr>
<tr>
<td style="text-align: left;">Model</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="ModelEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="ModelEditIcon">
</td>
<td>
<input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="ModelEditIcon">
</td>
<td>
<a id="ModelEditIcon" href="#"><img src="https://image.freepik.com/free-icon/summary_318-101407.png"></a>
</td>
</tr>
</table>
<强> JQuery的
$(document).ready(function() {
$(".allchecks").change(function(e) {
loopRow($(this).parent().parent());
});
function loopRow(r) {
console.log("Checking Row " + r[0].rowIndex);
var showImg = false;
$(r).find(".allchecks").each(function(k, v) {
if ($(v).is(":checked")) {
console.log("Found Check in row ", r);
showImg = true;
}
});
if (showImg) {
$(r).find("td:last-child img").show();
} else {
$(r).find("td:last-child img").hide();
}
}
$("table tr").each(function() {
loopRow($(this));
});
});
不要再为改变车轮而烦恼。利用您可以使用的工具。更改复选框后，循环浏览该行中的所有复选框，查看复选框.is(":checked")。这将返回true或false，如果您找到任何一个复选框，请将其标记。
如果未选中所有3，则该标志将保持为false并且图像将被隐藏。如果需要，您可以.remove()和.append()图片输入和输出。另一种保持流和渲染的方法是通过CSS切换visible属性。
最后，我在页面加载时循环表中的每一行，并检查每行中的检查。