title: Enable disable custom right click menu
body: <p><a href="http://jsfiddle.net/CmJ9z/" rel="nofollow">http://jsfiddle.net/CmJ9z/</a></p>
  
  <p>I have a checkbox that if it's checked I want a custom right click menu, but if it's not to have the default browser's context menu. However as soon as it's unchecked the custom menu still pops up and once checked again it shows/hide/show. </p>
  
  <p>Can someone help explain what I'm doing wrong?  </p>
  
  <p>Any help is greatly appreciated.</p>
  
  <pre><code>if ( $("#tm").prop('checked') === true ) {
      // Trigger action when the contexmenu is about to be shown
      $(document).bind("contextmenu", function (event) {
          // Avoid the real one
          event.preventDefault();
          $("#custom-menu").hide(100);
          // Show contextmenu
          if ($("#showcustom-menu").show() === true) {
              $("#custom-menu").hide(100).
              // In the right position (the mouse)
              css({
                  top: event.pageY + "px",
                  left: event.pageX + "px"
              });
          } else {
              $("#custom-menu").show(100).
              // In the right position (the mouse)
              css({
                  top: event.pageY + "px",
                  left: event.pageX + "px"
              });
          }
      });
  
      // If the document is clicked somewhere
      $(document).bind("mousedown", function () {
          $("#custom-menu").hide(100);
      });
  
      $("#custom-menu li").click(function(){
          // This is the triggered action name
          switch($(this).attr("data-action")) {
                  // A case for each action. Should personalize to your actions
              case "duplicate": alert("duplicate called"); break;
              case "remove": alert("remove called"); break;
              case "deselect": alert("deselect called"); break;
          }
      });
  } else {
  
  }
  $("#tm").on('change', function() {
      if ( $(this).prop('checked') === true ) {
          // Trigger action when the contexmenu is about to be shown
          $(document).bind("contextmenu", function (event) {
              // Avoid the real one
              event.preventDefault();
              $("#custom-menu").hide(100);
              // Show contextmenu
              if ($("#custom-menu").show() === true) {
                  $("#custom-menu").hide(100).
                  // In the right position (the mouse)
                  css({
                      top: event.pageY + "px",
                      left: event.pageX + "px"
                  });
              } else {
                  $("#custom-menu").show(100).
                  // In the right position (the mouse)
                  css({
                      top: event.pageY + "px",
                      left: event.pageX + "px"
                  });
              }
          });
  
          // If the document is clicked somewhere
          $(document).bind("mousedown", function () {
              $("#custom-menu").hide(100);
          });
  
          $("#custom-menu li").click(function(){
              // This is the triggered action name
              switch($(this).attr("data-action")) {
                      // A case for each action. Should personalize to your actions
                  case "duplicate": alert("duplicate called"); break;
                  case "remove": alert("remove called"); break;
                  case "deselect": alert("deselect called"); break;
              }
          });
      } else {
  
      }
  });
  </code></pre>