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

Question

I have two fancybox dialog, on one dialog when I click on checkbox label second dialog is opened.

What I want is on second dialog when select value is changed then on first dialog checkbox should be checked.

How can I achieve this ?

Here is my code that I tried:

$("#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
    }]);
}

Please note that I want to open fancybox manually like above.

Any help is appreciated. thanks.

CodePen

Answer 1

It is a bad practice to use inline JS code. Simply create object, bind events and then display:

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