checkbox label enabled disabled knockoutjs

Question

У меня есть html-форма, которая использует нокаут для управления режимом включения/выключения для элементов управления.

У меня есть элемент управления текстовыми полями и флажок, которыми управляет кнопка, если кнопка нажата, то они могут быть отредактированы, иначе они будут отключены.

Проблема связана с элементами управления флажками, потому что у них есть метка, вокруг которой добавляется класс включения/отключения, поэтому, хотя свойство 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 для категории «disabled» для метки и атрибут с отключенным HTML для ввода. Нокаут контролирует их по-разному. Используйте привязку css для управления классами.

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