X-可编辑。在编辑模式下通过主复选框打开 off/on 个复选框

Question

假设我有可编辑的表单，其中有几组复选框。在编辑模式下，我应该能够通过主复选框控制其他复选框的状态。当它处于选中状态时，我可以选中其他复选框，当它处于关闭状态时，它们都应该被取消选中和禁用。

这是我的 html 表格：

<body ng-app="app">
  <h4>x-editable checkbox test</h4>
  <div ng-controller="Ctrl">
    <form editable-form name="editableForm3" onaftersave="">

    <div> <span e-title="Maincb" editable-checkbox="useAll" e-name="maincb">
                                  <b>Maincb</b>: {{useAll ? "&#x2714;" :  "&#x2718;" }}
         </span>
    </div>

  <div>
   <span class="title"><h4><b>Supplementary</b></h4></span>
     <div>
       <span e-title="1" editable-checkbox="sup[0]" e-name="1">
            {{sup[0] ? "&#x2714" :  "&#x2718;"}}1
       </span>

      <span e-title="2" editable-checkbox="sup[1]" e-name="2">
            {{sup[1] ? "&#x2714" :  "&#x2718;" }}2
      </span>

      <span e-title="3" editable-checkbox="sup[2]" e-name="2">
            {{sup[2]? "&#x2714" :  "&#x2718;" }}3
     </span>
   </div>

 </div>

   ....
</form>

问题是是否可以通过 x-editable and/or angularjs 方法来完成？我尝试在 maincb 上使用 e-ng-change 并将其状态传输到某些控制器功能，但我无法关闭补充复选框... 我想这绝对有可能通过 jquery 但我想使用 angularsjs/x-editable 框架的方法。这是我的 fiddle

提前致谢。

Answer 1

与 jQuery，你可以这样做：

$(document).on('click', 'input[name=maincb]', function(){
    $('.editable-input').prop('checked', $(this).is(':checked'));
});

演示：http://jsfiddle.net/NfPcH/7474/

Hi, Sam. Sorry for delayed response. Formaly your answer is correct but as I mentioned above jquery doesn't handle angularjs model (or scope). So you can see that after use switch off all checkboxes and save, the still have unchenged state. How to glue checkboxes state with model? – Sharov 26 mins ago

我不是 angular 开发人员，我确信 Angular 有办法做到这一点，但这里有一个解决方法 jQuery

演示：http://jsfiddle.net/NfPcH/7505/

$(document).on('click', 'input[name=maincb]', function(){
    var checked = $(this).is(':checked');
    $('form > div').eq(1).find('.editable-input').each(function(){
        if($(this).is(':checked') != checked){
            $(this).trigger('click');  
        }
    });
});

X-可编辑。在编辑模式下通过主复选框打开 off/on 个复选框

X-Editable. Turn off/on checkboxes via main checkbox in edit mode

checkbox

jquery

angularjs

x-editable