jQuery：在按钮单击事件上启用复选框（带有标签）

Posted 2023-03-06

【中文标题】jQuery：在按钮单击事件上启用复选框（带有标签）

【英文标题】：jQuery: enable Check box (with Label For) on button click event

【发布时间】：2015-05-02 21:18:38

【问题描述】：

我已经为复选框视图模型编写了一个编辑器模板，在渲染它时执行以下代码：

@html.LabelFor(x => x.Checked, Model.Label, new Dictionary<string, object>   "for", Model.Name  )
@Html.CheckBoxFor(x => x.Checked, true, new Dictionary<string, object>   "id", Model.Name ,  "name", Model.Name ,  "class", "custom"  )

Helper类方法如下写，

public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, bool isReadonly, IDictionary<string, object> htmlAttributes)

在加载时禁用带有标签的复选框。

并且有按钮点击事件

   $(document).on('OnNewButtonClick', function (e) 
        alert("Entry");
        $("input:checkbox").removeAttr('disabled');
        $("input:text,textarea").removeAttr("readonly");
        $("input:text, input:radio, input:checkbox,textarea").css('background-color', 'transparent');
        $("input:checkbox").prop('disabled',false);
        alert("Exit");
    );

但它没有启用带有标签的复选框，单选按钮也存在同样的问题？

我尝试了每个选项来启用按钮单击。我正在使用 ASP.Net MVC4、Html5、CSS3、jQuery 移动应用程序。 使用的浏览器：IE、Firefox。

你好，你能建议一些其他的方法吗，因为最终你回答说我正在这样做，

 <script type="text/javascript">
    $(document).ready(function () 
        $(document).on("click", "#Newbutton", function (e) 
            $(this).trigger('OnNewButtonClick');
        );
    );
</script>           

【问题讨论】：

你试过.prop('disabled', false)吗？删除属性通常是一种不正确的方法，因此您仍然应该更改它

是的，我也分别尝试了这两个选项。在互联网上，我知道如何禁用它，但没有正确的方法，一旦加载，我将启用/禁用按钮点击

【参考方案1】：

感谢大家的支持和帮助，这是我的回答，如果我错了，请纠正我或有其他最佳解决方案。

似乎 Html 控件已加载，一旦加载，它就会在内部应用 CSS 和许多其他内容，如事件绑定、类名称、div 元素等。

因此，加载后无法使用这些额外的东西来启用/禁用，因为它找不到元素之间的交互方式。它的类名类似于“ui-checkbox ui-state-disabled”和它被用于许多地方，例如函数、事件，它是 html 源代码中的一种硬编码值。

如果我们对某些点击事件进行状态更改，它会删除复选框的状态而不是样式的状态，因此请注意与样式表关联的属性/属性。

我所做的，而不是在我在此方法中执行的辅助方法的 'htmlAttributes' 参数中的控件呈现时添加此属性，

public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool>> expression, bool isReadonly, IDictionary<string, object> htmlAttribute
    ...
    htmlAttributes["disabled"] = isReadonly;
    return htmlHelper.CheckBoxFor(expression, htmlAttributes);
    

一旦文档在下面的脚本中呈现/准备好，我就添加了属性，

<script type="text/javascript">
    $(document).ready(function () 
        alert('ready in partial');
        $("input:text, input:radio, input:checkbox,textarea").prop("readonly", true);
        $("input:radio, input:checkbox").prop('disabled', true);
        $("input:text, input:radio, input:checkbox,textarea").css('background-color', '#DEDEDE');
    );

它提供适当的事件处理和启用/禁用复选框/单选按钮的条件事件，如单击按钮。

【参考方案2】：

为什么你不使用这种方式

$(document).ready(
      $("#ButtonSelector").on('click',function()
        alert("Entry");
        $("input:checkbox").removeAttr('disabled');
        $("input:text,textarea").removeAttr("readonly");
        $("input:text, input:radio, input:checkbox,textarea").css('background-color', 'transparent');
        $("input:checkbox").prop('disabled',false);
        alert("Exit");
    );
);