复选框标签启用禁用knockoutjs

Question

我有 html 表格，它使用敲除来操纵控件的 enable/disable 模式。

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

问题出现在复选框控件上，因为它们的标签周围添加了 enable/disabled class，所以虽然禁用的属性从复选框控件中删除，标签仍然有禁用属性，不能使用。

这是我的：

<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 class 名称 "disabled" 和输入的 HTML 禁用属性。淘汰赛以不同的方式控制他们。使用 css 绑定来控制 classes.

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

复选框标签启用禁用knockoutjs

checkbox label enabled disabled knockoutjs

javascript

knockout-2.0

knockout.js