2017-10-28 2 views
1

2つのファンシーボックスダイアログがあります。最初のファンシーボックスのチェックボックスをオンにして、2番目の値が選択値に変更された場合

選択値が変更されたときに最初のダイアログボックスのチェックボックスをオンにする必要があります。

どうすればこの問題を解決できますか?

$("#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

答えて

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

+0

感謝を。もう一つ。キャプションにこの '$ src'オブジェクトを使用するにはどうすればいいですか? – Snappy

+1

現在、キャプションは文字列のみにすることができますが、コールバックを使用してキャプションを更新することができます。https://codepen.io/anon/pen/pdvNxY?editors=1010 – Janis

関連する問題