javascript - 复选框标签启用禁用knockoutjs

Question

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

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

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

这就是我所拥有的:

<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 类名称为“disabled”，输入的 HTML 禁用属性。 knockout 对它们的控制方式不同。使用 css 绑定(bind)来控制类。

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