点击功能上的Jquery不能通过类

时间:2016-07-14 08:04:18

标签: javascript jquery

我有一些元素,其中有标签给出相同的类名。因此,当单击标签时,该功能应该运行。但它只运行了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");
        }
    });

启用该字段一次,禁用该字段一次。但在那之后不是解雇。你能帮忙吗?

3 个答案:

答案 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);
    });