在列表项中选中复选框时，仅启用该列表项中的文本框 - 按 Jquery 类

Question

我有一个项目列表，我需要做的是能够选中该列表项中的复选框，然后才启用该列表项中的复选框。这是我到目前为止所做的JSFiddle。这将启用页面上具有该类名称的所有复选框。由于这来自数据源是一个 JS 文件，这些列表项是在剑道模板中生成的，所以我需要带有类名的文本框。

谢谢

<ul id="productsFoundList" data-role="listview" data-style="inset" class="km-list" data-bind="source:foundProducts" data-template="productsFound-listview-filtering-template">
<li>
    <label>code - desc
        <input type="checkbox" name="eventActionToBeTaken" class="productsUl" />
        <div style="position: relative; padding-top:18px; padding-bottom:15px">
            <div style="margin-left:80px">
                <label style="color:grey">Qty</label>
                <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/>
                <label style="color:grey">Price</label>
                <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/>
                <label style="color:grey">Discount(%)</label>
                <input type="number" value="" class="productsFoundInputBorders" disabled/>
            </div>
            <div style="padding-top:5px; ">
                <label style="color:grey; margin-left:64px">Notes</label>
                <input class="productsFoundInputBorders" type="text" style="width:530px !important;" value="" disabled/>
            </div>
        </div>
    </label>
</li>
<li>
    <label>code - desc
        <input type="checkbox" name="eventActionToBeTaken" class="productsUl" />
        <div style="position: relative; padding-top:18px; padding-bottom:15px">
            <div style="margin-left:80px">
                <label style="color:grey">Qty</label>
                <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/>
                <label style="color:grey">Price</label>
                <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/>
                <label style="color:grey">Discount(%)</label>
                <input type="number" value="" class="productsFoundInputBorders" disabled/>
            </div>
            <div style="padding-top:5px; ">
                <label style="color:grey; margin-left:64px">Notes</label>
                <input class="productsFoundInputBorders" type="text" style="width:530px !important;" value="" disabled/>
            </div>
        </div>
    </label>
</li>

         $("#productsFoundList").click(function() { //when list click
        $(".productsUl").each(function() { //for each checkbox
            if($(this).is(":checked") == true)
            {
                $("#basketButton").show(500);
            }
        });

        if($('.productsUl:checked').length == 0)
        {
            $("#basketButton").hide(500);
        }
    });

    $("#productsFoundList").click(function() {
        if ($(".productsUl").is(":checked") == true) {
            $(".productsFoundInputBorders").prop('disabled', false);
        }
        else
        {
            $(".productsFoundInputBorders").prop('disabled', true);
        }
    });

Answer 1

试试

var $basket = $("#basketButton");
var $checks = $(".productsUl").change(function () { //for each checkbox
    $(this).next().find(".productsFoundInputBorders").prop('disabled', !this.checked);
    $basket.stop(true, true)[$checks.filter(':checked').length  == 0 ? 'hide' : 'show'](500)
});

演示：Fiddle