使用Javascript函数将td的onclick设置为null

我有一行按钮，用于浏览网站。用户输入的信息填充了站点的某些页面。在输入信息之前，我想禁用单击导航按钮的功能。会话变量

session[“indexload”]

和

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;
          }
      }
 });

$（文档）.ready（函数（）{
document.getElementById（“buttontable”）.onclick=function（）{
如果（“”==“”）{
$（“td”）.attr（“onclick”，null）；
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
返回；
}如果（“”==“”），则为else{
$（“td”）.attr（“onclick”，null）；
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
返回；
}
}
});

我想禁用以下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>

按钮1
按钮2
按钮3
按钮4
按钮5
按钮6

---

现在，如果在会话==”时单击其中一个按钮（tds），则会显示警报，但我仍将被重定向到该按钮（td）的onclick函数中标识的目标。如何防止重定向？仅使用Javascript或jQuery就可以做到这一点吗？

我认为您应该能够做到以下几点：

$(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;
            }
        }
    });

$（文档）.ready（函数（）{
document.getElementById（“buttontable”）.onclick=function（e）
{
e、 预防默认值（）；
如果（“”==“”）{
$（“td”）.attr（“onclick”，null）；
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
返回；
}
如果（“”==“”），则为else{
$（“td”）.attr（“onclick”，null）；
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
返回；
}
}
});

您可以使用html5数据属性通过以下方式完成此操作：

HTML:

按钮1
按钮2
--------------------------------------
---------------------------------------
---------------------------------------

JQUERY：

$（文档）.ready（函数（）{
$（“.buttonstyle”）。单击（函数（）{
如果（“”==“”）{
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
}
否则{
window.location.href=$（this.data（“url”）；
}
如果（“”==“”），则为else{
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
}
});
});
 > p>您应该考虑使用适当的HTML元素，如<代码>

然后，您的脚本变得更简单：

$(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();
        }
    });
});

$（文档）.ready（函数（）{
$（“#按钮表”）。在（'click'，'.buttonstyle'，函数（e）{
如果（“”==“”|？“”==“”）{
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
e、 预防默认值（）；
}
});
});

---

这将添加事件处理程序来处理所有

元素的单击事件，如果条件为true，则停止跟踪链接（

e.preventDefault（）

停止导航）。否则，链接会像通常的链接一样被遵循。

您的原始代码有一个小问题，在这里进行了更正，以防您希望在不使用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;
        }
    });

var areButtonsDisabled=false；
$（文档）.ready（函数（）{
document.getElementById（“buttontable”）.onclick=function（）
{
如果（按钮已禁用）
{
警报（（（提醒用户按钮在执行特定操作之前处于禁用状态）”；
}
}
如果（“”==“”）{
$（“td”）.attr（“onclick”，null）；
areButtonsDisabled=true；
返回；
}
如果（“”==“”），则为else{
areButtonsDisabled=true；
$（“td”）.attr（“onclick”，null）；
返回；
}
});
$（“td”）。解除绑定（“单击”）@GokhanArik做了更改，我仍然有与上面相同的问题。警报将显示，但一旦警报关闭，它仍然会重定向。@GokhanArik我也尝试过。选定的答案最终对我有效。谢谢你的建议，虽然这正是我需要的。万分感谢！有一件事-我交换了else和else if。所以我以
if（session…etc）{
，
else if（session…etc）{
，
else{window…etc
<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();
        }
    });
});

    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;
        }
    });