我有一些元素,其中有标签给出相同的类名。因此,当单击标签时,该功能应该运行。但它只运行了2次然后没有开火。我通过单击标签禁用父div中的所有字段。只要点击它我就需要它。有人可以帮我这个吗?以下是我的尝试::
我的观点>>>
<div class="physicalExamTable">
<div class="col-md-12 noLeftPadding noRightPadding">
<div class="col-md-6 noLeftPadding">
<div class="form-inline topPaddingSmall">
<label class="testLabel btnColorInactive">CBC:</label>
%{--<a class="btn testLabel btnColorInactive">CBC:</a>--}%
</div>
</div>
</div>
<table class="table table-striped table-bordered" id="labCbcTbl" name="CBC:" activeStatus="0">
<thead>
<tr>
<th>WBC</th>
</tr>
</thead>
<tbody>
<tr>
<td><g:textField name="wbc" class="form-control"/></td>
</tr>
</tbody>
</table>
</div>
<div class="physicalExamTable">
<div class="col-md-12 noLeftPadding noRightPadding">
<div class="col-md-6 noLeftPadding">
<div class="form-inline topPaddingSmall">
<label class="btnColorInactive testLabel">Chemistry Panel:</label>
</div>
</div>
</div>
<table class="table table-striped table-bordered" id="labChemistryTbl1" name="Chemistry Panel 1:">
<thead>
<tr>
<th>Na</th>
</tr>
</thead>
<tbody>
<tr>
<td><g:textField name="na" class="form-control"/></td>
</tr>
</tbody>
</table>
</div>
我的jquery&gt;&gt;&gt;
$('#physicalExamDiv').on('click', 'label.testLabel', function() {
var parentDiv = $(this).closest('.physicalExamTable');
var currentLabel = $(this);
if (currentLabel.hasClass("btnColorInactive")) {
parentDiv.find("*").prop('disabled', false);
currentLabel.removeClass("btnColorInactive").addClass("btnColorActive");
parentDiv.find("table").attr("activeStatus", "1");
} else {
parentDiv.find("*").prop('disabled', true);
currentLabel.removeClass("btnColorActive").addClass("btnColorInactive");
parentDiv.find("table").attr("activeStatus", "0");
}
});
启用该字段一次,禁用该字段一次。但在那之后不是解雇。你能帮忙吗?
答案 0 :(得分:2)
编辑:由于我误解了这个问题,我已经改写了答案。
这是因为您使用.prop
函数将disabled属性设置为true或false。您应该使用.removeAttr('disabled')
删除该属性。
$("#physicalExamDiv").on("click", "label.testLabel", function() {
var parentDiv = $(this).closest('.physicalExamTable');
var currentLabel = $(this);
if (currentLabel.hasClass("btnColorInactive")) {
parentDiv.find("*").removeAttr("disabled");
currentLabel.removeClass("btnColorInactive").addClass("btnColorActive");
parentDiv.find("table").attr("activeStatus", "1");
} else {
parentDiv.find("*").attr("disabled", true);
currentLabel.removeClass("btnColorActive").addClass("btnColorInactive");
parentDiv.find("table").attr("activeStatus", "0");
}
});
答案 1 :(得分:1)
由于您要禁用该链接,它第三次无法正常工作:
parentDiv.find("*").prop('disabled', true);
注意:这取决于浏览器。
示例:
https://jsfiddle.net/zgmbqv11/
<label>click</label>
$("label").click(function() {
alert("ok");
$("label").prop("disabled", true)
})
IE11中的小提琴给出一个警告,在Chrome中它继续工作。
答案 2 :(得分:0)
自由主义的想法对我有用。添加了这一行parentDiv.find("label").prop('disabled', false);
如下,它可以帮助其他人&gt;&gt;&gt;
$('#physicalExamDiv').on('click', 'label.testLabel', function() {
var parentDiv = $(this).closest('.physicalExamTable');
var currentLabel = $(this);
if (currentLabel.hasClass("btnColorInactive")) {
parentDiv.find("*").prop('disabled', false);
currentLabel.removeClass("btnColorInactive").addClass("btnColorActive");
parentDiv.find("table").attr("activeStatus", "1");
} else {
parentDiv.find("*").prop('disabled', true);
currentLabel.removeClass("btnColorActive").addClass("btnColorInactive");
parentDiv.find("table").attr("activeStatus", "0");
}
parentDiv.find("label").prop('disabled', false);
});