当 select 值在第二个 fancybox 上更改时，选中第一个 fancybox 上的复选框

Question

我有两个 fancybox 对话框，当我单击复选框标签时在一个对话框上打开第二个对话框。

我想要的是在 select 值更改时在第二个对话框中，然后在第一个对话框中选中复选框。

我怎样才能做到这一点？

这是我试过的代码：

$("#fancybox-manual-c").click(function() {
    $.fancybox.open([{
        src : '<div class=\'col-md-3\'><div class="checkbox checkbox-success" onclick="javascript:get(this);">'+
'<input id="checkbox1" type="checkbox" class="styled" value="" onclick=""> '+
'<label for="checkbox1"><a data-fancybox-next class="button-next" href="#">ONE</a></label>'+
'</div></div>',
        type : 'html',
        smallBtn : true
   }]);
});

this.get = function(t){
     //$(t).find('input#checkbox1').attr('checked', true);
     $.fancybox.open([{
        src: '<div class="col-md-3"><div class="checkbox checkbox-success"><select onchange="\''+t+'\'.find(\'input#checkbox1\').attr(\'checked\', true);"><option value="Unclassified">False</option><option value="">true</option></select></div></div>',
        type : 'html',
        smallBtn : false
    }]);
}

请注意，我想像上面那样手动打开fancybox。

感谢任何帮助。谢谢。

CodePen

Answer 1

使用内联 JS 代码是一种不好的做法。只需创建对象，绑定事件，然后显示：

var $src = $('<div class="col-md-3"><div class="checkbox checkbox-success"><select><option value="0">False</option><option value="1">true</option></select></div></div>');

$src.find('select').on('change', function() {
  $('#checkbox1').prop('checked', this.value == 1 ? true : false);
});

$.fancybox.open({
  src  : $src,
  type : 'html',
  smallBtn : true,
  toolbar  : false
});

https://codepen.io/anon/pen/WXNLmX?editors=1010

当 select 值在第二个 fancybox 上更改时，选中第一个 fancybox 上的复选框

check checkbox on first fancybox when select value changes on second one

html

jquery

fancybox