New to jQuery with ASP.NET, simplifying jQuery code?

Question

So I have the below little number on a ASP.NET page.

The page consists of a gridview that I'm happy with, there is a checkbox in each row and once checked enables other controls in row, a save button iterates through the rows and actions into database.

My question is, the below code works how I want it, however is there any neat tricks to simplify further? More of a question to expand my knowledge? :)

`<script type="text/javascript">
    $(document).ready(function () {

        //If checkbox in row is checked then
        $('[id^="MainContent_TCProcurement_TABPurchasing_GVQuotes_CBPurchased1_"]').click(function () {
            //Checkbox row id
            var idstr = this.id.replace('MainContent_TCProcurement_TABPurchasing_GVQuotes_CBPurchased1_', '');
            //Controls to alter
            var suppDDL = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_DDLSuppliers_" + idstr);
            var qtyPurchased = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBQuantity1_" + idstr);
            var ratePaid = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBRatePaid1_" + idstr);
            var buyer = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBBuyer1_" + idstr);
            var purchasedDate = $("#MainContent_TCProcurement_TABPurchasing_GVQuotes_TBDatePurch1_" + idstr);
            //If checked then remove disabled and enter some details
            if (this.checked) {
                suppDDL.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
                qtyPurchased.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
                ratePaid.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
                buyer.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style").val("<%= Session("loggedInUserName")%>");
                purchasedDate.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style").val("<%= Date.Now()%>");
            } else {
                var newTBStyle = "font-family: Arial; font-size: 1em; background-color: rgb(235, 235, 228);";
                suppDDL.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
                qtyPurchased.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
                ratePaid.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
                buyer.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle).val("");
                purchasedDate.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle).val("");
            }
        });

    });
</script>

Many thanks, Ollie

Answer 1

This is untested, but you could add a common class to the items you want to enable and disable like this

class="rowControl"

Then, adjust it like this:

var myControl = $("[id~="+idstr+"].rowControl"); 
...
if (this.checked) {
   myControl.removeAttr('disabled').removeClass('aspNetDisabled').removeAttr("style");
} else {
   myControl.attr('disabled', 'disabled').addClass('aspNetDisabled').attr('style', newTBStyle);
}

While it doesn't do everything you need, it would adjust ALL elements with that class. You can add back the parts that are missing (like setting specific values).

NOTE: var myControl = $("[id~="+idstr+"].rowControl"); will select all elements with the id containing idstr and class rowControl.