How to loop on the list view (clientside to disable specific check box in)

Question

I have a listview like this :

<telerik:RadListView ID="rlv_available_sys" runat="server" ItemPlaceholderID="sys_holder"
                                DataKeyNames="process_id" OnItemDataBound="rlv_available_sys_ItemDataBound">
                                <ItemTemplate>
                                    <table>
                                        <colgroup>
                                            <col title="process name" />
                                        </colgroup>
                                        <tr>
                                            <td>
                                                <asp:HiddenField ID="hf_id" runat="server" Value='<%#Eval("process_id")%>' />
                                                <asp:CheckBox ID="chb_sys" runat="server" CausesValidation="false" />
                                                <asp:Label ID="lbl_available_sys" runat="server" Text='<%# Eval("process_name") %>'></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </telerik:RadListView>

---

and jquery :

addWidgetControls : function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings;

        $(settings.widgetSelector, $(settings.columns)).each(function () {
            var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
            if (thisWidgetSettings.removable) {
                $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                    e.stopPropagation();    
                }).click(function () {
                    if(confirm('This widget will be removed, ok?')) {
                        $(this).parents(settings.widgetSelector).animate({
                            opacity: 0    
                        },function () {
                            $(this).wrap('<div/>').parent().slideUp(function () {
                                $(this).remove();
                            });
                        });
                    }
                    return false;
                }).appendTo($(settings.handleSelector, this));
            }

---

What i want to do is :

When the user click close to remove the widget ,with some jquery way disable the intended check box and set checked = true.(How to modify the previous jquery to do this in client side)

Answer 1

I assume that settings.widgetSelector selects the top element of a widget, that is, the table or a Telerik wrapper around it. I leave your other code intact:

 ...
 if(confirm('This widget will be removed, ok?')) {
     // reference to current widget wrapper
     var widget = $(this).parents(settings.widgetSelector);
     // disable and select (all) contained checkboxes
     widget.find('input[type=checkbox]').prop({disabled: true, checked: true});​​​​​​​​​​​​​​
     // animate and remove widget...
     widget.animate({
         opacity: 0
     ...

Note that this solution will disable and select all contained checkboxes in a widget. If you have multiple checkboxes and only need to select a single one, give it a class (e.g. myCheckbox) and change the selector to

     widget.find('input[type=checkbox].myCheckbox').attr({disabled: true, checked: true});​​​​​​​​​​​​​​

You should not use the existing checkbox ID if you have more than one widget, as element IDs should be unique for the whole document.

UPDATE:

Turned out that I misunderstood the problem: the checkboxes to be disabled are not inside the mentioned widgets and the actual task is to

…disable the input type="checkbox" if the value of the input type ="hidden" that exist in the same is equal to the id of the li (widget).

(See discussion in comments.)

This could be a solution:

...
$(settings.widgetSelector, $(settings.columns)).each(function () {
    var widgetId = this.id; 
    var thisWidgetSettings = iNettuts.getWidgetSettings(widgetId);
    if (thisWidgetSettings.removable) {
        $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
            e.stopPropagation();    
        }).click(function () {
            if(confirm('This widget will be removed, ok?')) {
                // Disable checkboxes which have a sibling hidden input field with value equal to widgetId
                $(​'table tr input[type=hidden]').filter(function() {
                    return $(this).val()​​​​​ == widgetId;
                }).siblings('input[type=checkbox]').prop({disabled:true, checked: true});

                // animate and remove widget...
                $(this).parents(settings.widgetSelector).animate({
                    opacity: 0
                ...