如何在列表视图上循环(客户端禁用中的特定复选框）

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

本文关键字：复选框 客户端 列表 视图 循环      更新时间：2023-09-26

我有这样的列表视图：

<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>

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

我想做的是：

当用户单击关闭以删除小部件时，使用一些jquery方法禁用预期复选框并设置checked=true。（如何在客户端修改以前的jquery）

我假设settings.widgetSelector选择了小部件的顶部元素，即表或它周围的Telerik包装

 ...
 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
     ...

请注意，此解决方案将禁用并选择小部件中包含的所有复选框。如果你有多个复选框，只需要选择一个，给它一个类（例如myCheckbox），并将选择器更改为

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

如果您有多个小部件，则不应使用现有的复选框ID，因为元素ID对于整个文档应该是唯一的。

更新：

事实证明，我误解了这个问题：要禁用的复选框不在上面提到的小部件内，而实际任务是

…如果输入type="hidden"的值等于li（小部件）的id，则禁用输入type="checkbox"。

（参见评论中的讨论。）

这可能是一个解决方案：

...
$(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
                ...
相关文章：