最近由于业务需要,需要通过一个radio选项来关联多个form控件的联动。通过查看Laravel-Admin源码可知,radio框引入了JS的iCheck控件来重写radio组件。

通过某度,查到iCheck内置了大量的回调事件,可用来监听change、checked等事件。

回调事件

iCheck 提供了大量回调事件,都可以用来监听 change 事件

事件名称使用时机
ifClicked用户点击了自定义的输入框或与其相关联的 label
ifChanged输入框的 checked 或 disabled 状态改变了
ifChecked输入框的状态变为 checked
ifUncheckedchecked 状态被移除
ifDisabled输入框状态变为 disabled
ifEnableddisabled 状态被移除
ifCreated输入框被应用了 iCheck 样式
ifDestroyediCheck 样式被移除

使用 on() 方法绑定事件:


$('input').on('ifChecked', function(event){

  alert(event.type + ' callback');

});

 

以及常用方法:

  • $('input').iCheck('check');:将输入框的状态设置为 checked
  • $('input').iCheck('uncheck');:移除 checked 状态
  • $('input').iCheck('toggle');:
  • $('input').iCheck('disable');:将输入框的状态设置为 disabled
  • $('input').iCheck('enable');:移除 disabled 状态
  • $('input').iCheck('update');:
  • $('input').iCheck('destroy');:移除 iCheck 样式

运用于Laravel-Admin中,案例如下:(仅供参考,版本1.7.14)



protected function form()

{

    $form = new Form(new Users());

    Admin::script("

        $('input[name=\"case_type\"]').on('ifChecked',function(event){

            if(event.target.value == 1){

                $('input[name=\"data_source\"][value=\"2\"]').iCheck('enable');

            }

            if(event.target.value == 2){

                $('input[name=\"data_source\"][value=\"2\"]').iCheck('disable');

            }

        });

    ");

    $form->radio('case_type','案例类型')->options(['1'=>'普通案例','2'=>'特殊案例'])->default('1');

    $form->radio('data_source', __('资料来源'))->options(['1'=>'市场调查','2'=>'交易查档','3'=>'网络查询'])->default('1');

    return $form;

}