复选框标签已启用已禁用knockoutjs

Question

我有html表单，它使用knockout来操作控件的启用/禁用模式。

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

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

这就是我所拥有的：

<table width="95%" 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>

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

当我点击编辑按钮时，会发生这种情况：

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

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

Answer 1

您的css类名称为＆＃34;已禁用＆＃34;用于标签，以及输入的HTML禁用属性。 Knockout以不同方式控制它们。使用css绑定来控制类。

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