Question

我有一排用于导航网站的按钮。用户输入填充站点的某些页面的信息。在输入信息之前，我想禁用单击导航按钮的功能。会话变量Session["indexloaded"]和Session["build"]表示用户是否输入了所需信息。我目前正在使用这个脚本：

$(document).ready(function () {
      document.getElementById("buttontable").onclick = function (){
              if ('<%=Session["indexloaded"]%>' === "") {
              $("td").attr("onclick", null);
              alert("(Alert user that the buttons are disabled until they do a certain action)");
              return;
          }else if ('<%=Session["build"]%>' === "") {
              $("td").attr("onclick", null);
              alert("(Alert user that the buttons are disabled until they do a certain action)");
              return;
          }
      }
 });

我想禁用以下onclick功能。 HTML：

<table id="buttontable">
    <tr>
        <td class="buttonstyle" onclick="location.href='page1.aspx';" style='text-align: center; width:x%;'>Button 1</td>
        <td class="buttonstyle" onclick="location.href='page2.aspx';" style='text-align: center; width:x%;'>Button 2</td>
        <td class="buttonstyle" onclick="location.href='page3.aspx';" style="text-align: center; width:x%;">Button 3</td>
        <td class="buttonstyle" onclick="location.href='page4.aspx';" style="text-align: center; width:x%;">Button 4</td>
        <td class="buttonstyle" onclick="location.href='page5.aspx';" style="text-align: center; width:x%;">Button 5</td>
        <td class="buttonstyle" onclick="location.href='page6.aspx';" style="text-align: center; width:x%;">Button 6</td>
    </tr>
</table>

现在，如果在会话===“”时单击其中一个按钮（tds），将显示警报，但我仍将被重定向到该按钮的onclick功能中标识的目标（td）。如何防止重定向？这可以只使用Javascript或jQuery来完成吗？

Answer 1

您可以使用html5数据属性以这种方式完成此任务：

HTML：

<td class="buttonstyle" data-url="page1.aspx" style='text-align: center; width:x%;'>Button 1</td>
<td class="buttonstyle" data-url="page2.aspx" style='text-align: center; width:x%;'>Button 2</td>
       --------------------------------------
       ---------------------------------------
       ---------------------------------------

JQUERY：

$(document).ready(function () {

    $(".buttonstyle").click(function(){

     if ('<%=Session["indexloaded"]%>' === "") {
         alert("(Alert user that the buttons are disabled until they do a certain action)");

     }
else {
window.location.href = $(this).data("url");
}
else if ('<%=Session["build"]%>' === "") {

     alert("(Alert user that the buttons are disabled until they do a certain action)");

            }
        });
  });

Answer 2

您的原始代码存在轻微问题，在此处进行了更正，以防您希望在不使用HTML5的情况下使原始概念正常工作。

    var areButtonsDisabled = false;
    $(document).ready(function () {
        document.getElementById("buttontable").onclick = function ()
        {
            if(areButtonsDisabled)
            {
                alert("(Alert user that the buttons are disabled until they do a certain action)");
            }
    }

        if ('<%=Session["indexloaded"]%>' === "") {
            $("td").attr("onclick", null);
            areButtonsDisabled = true;
            return;
        }
        else if ('<%=Session["build"]%>' === "") {
            areButtonsDisabled = true;
            $("td").attr("onclick", null);
            return;
        }
    });

Answer 3

我认为你应该可以做这样的事情：

$(document).ready(function () {
        document.getElementById("buttontable").onclick = function (e)
        {
            e.preventDefault();
            if ('<%=Session["indexloaded"]%>' === "") {
                $("td").attr("onclick", null);
                alert("(Alert user that the buttons are disabled until they do a certain action)");
                return;
            }
            else if ('<%=Session["build"]%>' === "") {
                $("td").attr("onclick", null);
                alert("(Alert user that the buttons are disabled until they do a certain action)");
                return;
            }
        }
    });

Answer 4

您应该考虑使用正确的HTML元素，例如链接的<a>元素：

<table id="buttontable">
    <tr>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page1.aspx">Button 1</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page2.aspx">Button 2</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page3.aspx">Button 3</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page4.aspx">Button 4</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page5.aspx">Button 5</a></td>
        <td style='text-align: center; width:x%;'><a class="buttonstyle" href="page6.aspx">Button 6</a></td>
    </tr>
</table>

然后你的脚本变得更加简单：

$(document).ready(function () {
    $("#buttontable").on('click', '.buttonstyle', function(e) {
        if ('<%=Session["indexloaded"]%>' === "" || '<%=Session["build"]%>' === "") {
            alert("(Alert user that the buttons are disabled until they do a certain action)");
            e.preventDefault();
        }
    });
});

这将添加事件处理程序来处理所有<a>元素的click事件，如果条件成立，则停止跟踪链接（e.preventDefault()停止导航）。否则，链接会像链接一样被跟踪。

使用Javascript函数将td onmplick设置为null

4 个答案:

HTML：

JQUERY：