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和/或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'));
});

DEMO：http://jsfiddle.net/NfPcH/7474/

嗨，山姆。很抱歉延迟回复。你的答案是正确的但正如我上面提到的那样，jquery并没有处理angularjs模型（或者范围）。所以你可以看到使用后关闭所有复选框和保存，仍然有未更改的状态。如何粘合复选框状态与模特？ - Sharov 26分钟前

我不是一个有角度的开发人员，我确信有一种方法可以用Angular来做到这一点，但这是一个使用jQuery做的解决方法

DEMO：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编辑。在编辑模式下通过主复选框关闭/打开复选框

1 个答案: