CODEWITHSUNDEEP
javascriptknockout.jsknockout-2.0
Laziale
Laziale

Reputation: 8225

checkbox label enabled disabled knockoutjs

I have html form which is using knockout to manipulate enable/disable mode for controls.

I have textbox control and checkbox control which are manipulated by a button, if the button is clicked then they can be edited, otherwise they are disabled.

The problem is happening with the checkbox controls because they have label around which is adding enable/disabled class, so although the disabled property is removed from the checkbox control, the label still has the disabled property and can't be used.

This is what I have:

<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>

On initial load the controls are disabled:

enter image description here

When I click the edit button this is happening:

enter image description here

As you can see the disabled property is removed from the checkbox but not from the label which wraps the checkbox.

Any idea how I can fix that?

Upvotes: 0

Views: 1325

Answers (1)

Roy J
Roy J

Reputation: 43881

You have a css class name of "disabled" for the label, and an HTML disabled attribute for the input. Knockout controls them differently. Use the css binding to control classes.

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

Upvotes: 1

Related Questions