Enable/Disable an image link depending on the state of the checkbox in jquery
I built a jquery plugin to which I'm passing the ID of an HTML checkbox as a parameter:
$("div.plugin").pluginname({
      chckBoxID: "chk" + $(this).attr("id")
});
The plugin generates an image link
(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>");
        }
    });
});
By default, the checkbox is not checked.
What I want to do is:
(1) When the user clicks/checks the checkbox, the image link should open a new browser window.
(2) When the user unchecks the checkbox, the image link should not open a new browser window.
Your help is appreciated.
An update to my code ---
HTML Code looks like this
<div>
    <input type="checkbox" id开发者_如何学JAVA="chk1" />
</div>
<div class="plugin" id="1"></div>
<a><img> is generated by the plugin
$(this).html("<a><img src='images/x.gif'></img></a>");
You can't use $(this) the way you're passing it into the plugin. You CAN do something like this though:
$("div.plugin").each(function (i) {
    $(this).pluginname({
      chckBoxID: "chk" + $(this).attr("id")
    });
});
Then I believe what you're trying to do in your plugin is something like this:
(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);
This assumes your HTML code looks something like this:
<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>
 
         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论