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

问题

Suppose that I have editable form where I have some sets of checkboxes. In edit mode I should be able to control state of other checkboxes via main checkbox. When it is in selected state then I can check other checkboxes, when it is in off state then they all should be unchecked and disabled.

Here my html form:

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

The question is whether it is possible to do via x-editable and/or angularjs methods? I tried to use e-ng-change on maincb and transfer it's state to some controller function but I couldn't switch off supplementary checkboxes... I guess it is definitly possible via jquery but I would like to use methods of angularsjs/x-editable framework. Here is my fiddle

Thanks in advance.

回答1:

with jQuery, you can do this:

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

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

I'm not an angular developer, I'm sure there is a way to do that with Angular, but here is a workaround to do it with 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');  
        }
    });
});

来源：https://stackoverflow.com/questions/29476416/x-editable-turn-off-on-checkboxes-via-main-checkbox-in-edit-mode

标签

jquery

angularjs

checkbox

x-editable