X-Editable. Turn off/on checkboxes via main checkb

2019-09-06 20:35发布

站内问答 / jQuery
790 1 6

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条回答
Viruses.
2楼-- · 2019-09-06 21:23

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');  
        }
    });
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)