Включить / отключить ссылку на изображение в зависимости от состояния флажка в jquery

Question

Я создал плагин jquery, в который я передаю идентификатор флажка HTML в качестве параметра:

$("div.plugin").pluginname({
      chckBoxID: "chk" + $(this).attr("id")
});

Плагин генерирует ссылку на изображение

(function( $ ){ 

    $.fn.extend({   

        pluginname: function(options){

            var defaults = {
                chckBoxID: ""
            }
            var options = $.extend(defaults, options);
            var o = options;
            $("div#" + imageDiv).html("<a><img src='images/x.gif'></img></a>");
        }
    });
});

По умолчанию флажок не установлен.

Что я хочу сделать:

(1) Когда пользователь нажимает / проверяет флажок, ссылка на изображение должна открывать новое окно браузера.

(2) Когда пользователь снимает флажок, ссылка на изображение не должна открывать новое окно браузера.

Ваша помощь приветствуется.

Обновление моего кода ---

HTML-код выглядит следующим образом

<div>
    <input type="checkbox" id="chk1" />
</div>
<div class="plugin" id="1"></div>

<a><img> генерируется плагином

$(this).html("<a><img src='images/x.gif'></img></a>");

Answer 1

Вы не можете использовать $ (this), как вы передаете его в плагин.Вы МОЖЕТЕ сделать что-то вроде этого:

$("div.plugin").each(function (i) {
    $(this).pluginname({
      chckBoxID: "chk" + $(this).attr("id")
    });
});

Тогда я считаю, что то, что вы пытаетесь сделать в своем плагине, выглядит примерно так:

(function ($) {
    $.fn.pluginname = function (options) {
        var opts = $.extend({}, $.fn.pluginname.defaults, options);

        var pluginnameClick = function (e) {
            if ($("#" + opts.chckBoxID).is(":checked")) {
                e.preventDefault();
                window.open($(this).attr('href'));
            }
        };

        $(this).each(function (i) {
            $('a', $(this)).bind("click", pluginnameClick);
        });
    };

    $.fn.pluginname.defaults = {
        chckBoxID: "chk"
    }
})(jQuery);

Это предполагает, что ваш HTML-код выглядиткак то так:

<div class="plugin" id="1">
    <a href="link1.htm"><img src="image.jpg" /></a>
    <input type="checkbox" id="chk1" />
</div>
<div class="plugin" id="2">
    <a href="link2.htm"><img src="image.jpg" /></a>
    <input type="checkbox" id="chk2" />
</div>