Javascript在单击其他图像时禁用可单击图像_Javascript_Jquery_Css_Html

Javascript在单击其他图像时禁用可单击图像

javascript jquery css html

Javascript在单击其他图像时禁用可单击图像,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我有两个按钮，两个按钮上都有警报功能。我想，如果用户点击第一个按钮，第一个按钮上的功能应该工作，但当用户点击第二个按钮时，第一个按钮上的功能应该不工作。我的意思是，如果用户点击了第二个按钮，第一个按钮上的功能应该不工作。下面是代码，但它不起作用： <script> function abc(){ alert ("its a alert box!"); } function xyz(){ var a=150; alert(a); } <body>

我有两个按钮，两个按钮上都有警报功能。我想，如果用户点击第一个按钮，第一个按钮上的功能应该工作，但当用户点击第二个按钮时，第一个按钮上的功能应该不工作。我的意思是，如果用户点击了第二个按钮，第一个按钮上的功能应该不工作。下面是代码，但它不起作用：

<script>
function abc(){
    alert ("its a alert box!");
}

function xyz(){
    var a=150;
    alert(a);
}

<body>
<input type="button" value="submit 1" onClick="abc();">

<input type="button" value="submit 2" onClick="xyz();">
</body>


函数abc（）{
警报（“这是一个警报框！”）；
}
函数xyz（）{
var a=150；
警报（a）；
}

使用jQuery（因为它是您给帖子的标签之一），您可以使用它

当单击第二个按钮时，可以使用jquery解除第一个按钮的单击事件绑定。但是，您需要添加一些id属性，以便可以轻松地执行此操作

<body>
<script>
function abc(){

   alert ("its a alert box!");
}
function xyz(){
   $('#btn1').unbind('click');
   var a=150;

   alert(a);   
}
</script>

<input id="btn1" type="button" value="submit 1" onClick="abc();"></input>

<input id="btn2" type="button" value="submit 2" onClick="xyz();"></input>
</body>

对于初学者，不要使用内联单击处理程序。嗯，像这样会更好：

<script>
$(document).ready(function(){

    function abc(){
       alert ("its a alert box!");
    }

    function xyz(){
       var a=150;
       alert(a);   
    }

   var bt1enabled = true;
   $('body').on('click', 'input[type=button]', function(){
      if(this.id==="btn1" && bt1enabled) {
          abc();
      } else if (this.id==="btn2") {
          btn1enabled = false; // or btn1enabled = !btn1enabled if this is supposed to toggle
          xyz();
      }
   });
}):
</script>

<body>
  <input id="btn1" type="button" value="submit 1"></input>  
  <input id="btn2" type="button" value="submit 2"></input>
</body>


$（文档）.ready（函数（）{
函数abc（）{
警报（“这是一个警报框！”）；
}
函数xyz（）{
var a=150；
警报（a）；
}
var bt1enabled=true；
$（'body'）。在（'click'，'input[type=button]'上，函数（）{
if（this.id==“btn1”&&bt1enabled）{
abc（）；
}else if（this.id==“btn2”）{
btn1enabled=false；//或btn1enabled=！btn1enabled，如果这是应该切换的
xyz（）；
}
});
}):

试试这个

<div>
<input id="button1" type="button" value="Click1"/>
<input id="button2"type="button" value="Click2"/>
</div>

<script>
$('#button1').on('click', Button1Click);
$('#button2').on('click', Button2Click);

function Button1Click() {
    alert("You have clicked button 1");
}

function Button2Click() {
    alert("You have clicked button 2");
}


$（'按钮1'）。在（'单击'，按钮1单击）上；
$（“#按钮2”）。在（'click'，按钮2 click）上；
函数按钮1单击（）{
警报（“您已单击按钮1”）；
}
函数按钮2单击（）{
警报（“您已单击按钮2”）；
}

检查第二个按钮是否被单击的检查在哪里？一个简单的布尔值设置为true/false。在深入研究javascript之前，首先要学会编写正确的HTML。我认为深入研究javascript永远不会太早。即使没有HTML、DOM或浏览器，也可以使用JavaScript。它无处不在，没有硬性的先决条件，在我看来，对编程技术的介绍也不错。在本例中，有些误导性地使用HTML对代码的运行没有影响。听说过HTML中的一个叫做head的小东西吗？@Joren-不知道你为什么在JavaScript问题上批评示例HTML。此外，没有要求JS在头部。事实上，最好的做法是把它放在身体的底部。在这种情况下，省略不必要的标记会使答案更具可读性。正如w3c

参考（）所述：“SCRIPT元素将脚本放置在文档中。此元素可能在HTML文档的头部或正文中出现任意次数。”。因此，它必须放在文档的

或

中。不是直接在

@JECarterII中，而是在您的“进一步完善”中，您可以将该代码简化为

$（'#btn1'）。单击（abc）.

-匿名函数是不必要的。@ZachL-谢谢，我也这么想，但我快速查看参考并没有确认我的记忆，所以我选择了详细版本。但我同意-cleaner更好-更新。这并没有回答OPs关于如何禁用一个按钮的问题。而且，它在JS（和eleswhere）中的一般约定是为构造函数保留大写的函数名。

<div>
<input id="button1" type="button" value="Click1"/>
<input id="button2"type="button" value="Click2"/>
</div>

<script>
$('#button1').on('click', Button1Click);
$('#button2').on('click', Button2Click);

function Button1Click() {
    alert("You have clicked button 1");
}

function Button2Click() {
    alert("You have clicked button 2");
}