X-可编辑。在编辑模式下通过主复选框关闭/打开复选框答案

【问题标题】：X-Editable. Turn off/on checkboxes via main checkbox in edit modeX-可编辑。在编辑模式下通过主复选框关闭/打开复选框
【发布时间】：2015-06-11 03:42:09
【问题描述】：

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

这是我的 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 和/或 angularjs 方法来实现？我尝试在 maincb 上使用 e-ng-change 并将其状态转移到某些控制器功能，但我无法关闭补充复选框... 我想这绝对可以通过 jquery 实现，但我想使用 angularsjs/x-editable 框架的方法。这是我的fiddle

提前致谢。

【问题讨论】：

标签： jquery angularjs checkbox x-editable

【解决方案1】：

使用 jQuery，您可以这样做：

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

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

嗨，山姆。抱歉延迟回复。形式上你的答案是正确的但正如我上面提到的 jquery 不处理 angularjs 模型（或范围）。所以你可以看到使用后关闭所有复选框和保存，仍处于未成状态。如何粘合复选框状态与模型？ – Sharov 26 分钟前

我不是 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');  
        }
    });
});

【讨论】：

是的，使用 jquery 并不难。我认为当我们在范围内更改模型并反映时有解决方案，但它似乎并不那么容易......
嗨，山姆。抱歉延迟回复。形式上你的答案是正确的，但正如我上面提到的 jquery 不处理 angularjs 模型（或范围）。所以你可以看到在使用关闭所有复选框并保存后，仍然有未修改的状态。如何将复选框状态与模型粘合？