When checkbox checked in list item, only enable textboxes in that list item - by class Jquery

Question

I have a list of items and what I need to do is to be able to check a checkbox in that list item and only then checkboxes in that list item become enabled. Here is a JSFiddle of what I have done so far. This enables all checkboxes with that class name on the page. As this comes from a data source is a JS file, these list items a generated in a kendo template so I need the textboxes with class names.

Thank you

<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

Try

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

Demo: Fiddle