复选框标签启用禁用敲除js

Posted 2023-03-14

【中文标题】复选框标签启用禁用敲除js

【英文标题】：checkbox label enabled disabled knockoutjs

【发布时间】：2015-04-24 17:28:38

【问题描述】：

我有一个 html 表单，它使用敲除来操纵控件的启用/禁用模式。

我有文本框控件和复选框控件，它们是由按钮操作的，如果单击按钮，则可以对其进行编辑，否则将被禁用。

问题出现在复选框控件上，因为它们的标签周围添加了启用/禁用类，因此尽管从复选框控件中删除了 disabled 属性，但标签仍然具有 disabled 属性并且无法使用。

这就是我所拥有的：

<table  data-bind="with: settings">
    <tr>
        <td style="width:20%" valign="top">q1<br />
            <label class="label_yesno">
                <input type="checkbox" data-bind="checked: prop_2, enable: editMode" />
            </label>
        </td>
        <td style="width:5%"></td>
        <td valign="top">q2<br />
            <label class="label_yesno">
                <input type="checkbox" data-bind="checked: prop_34, enable: editMode" />
            </label>
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td valign="top">q3
                <br />
            <label class="label_yesno">
                <input type="checkbox" data-bind="checked: prop_52, enable: editMode" />
            </label>
        </td>
        <td></td>
        <td valign="top">q4:<br />
            <input type="text" style="width: 95%" data-bind="value: prop_12, enable: editMode" />
        </td>
    </tr>
</table>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)

    string script = @"
    function settingsViewModel()  
        return 
            prop_2: ko.observable(false),
            prop_12: ko.observable(''),
            prop_34: ko.observable(false),
            prop_52: ko.observable(false)
        ;
    ;";
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "settingsvm", script, true);

</script>

在初始加载时，控件被禁用：

当我点击编辑按钮时：

如您所见， disabled 属性已从复选框中删除，但未从包装该复选框的标签中删除。

知道如何解决这个问题吗？

【问题讨论】：

类禁用与属性禁用不同。使用 css 绑定更改类：

谢谢@RoyJ，请把它写成答案，这样我就可以将您的答案标记为正确。

【参考方案1】：

标签的 css 类名称为“disabled”，输入的 HTML disabled 属性。淘汰赛以不同的方式控制它们。使用 css 绑定来控制类。

<label class="label_yesno" data-bind="css:disabled:editMode">
    <input type="checkbox" data-bind="checked: prop_2, enable: editMode" />
</label>