根据 Javascript 或 jquery 中的条件禁用多个表单并启用一个表单答案

【问题标题】：Disable Multiple Form and enable one form Based on Condition in Javascript or jquery根据 Javascript 或 jquery 中的条件禁用多个表单并启用一个表单
【发布时间】：2014-03-03 08:41:41
【问题描述】：

我有四种形式，如form-1、form-2、form-3、form-4 和三个ButtonsButton-1、Button-2、Button-3。

当第一个 jsp 页面加载时，它具有将显示在屏幕上的表单元素。

现在我的问题是当我点击button-2 时，它应该显示form-2 并禁用其他三种形式（form-1、form-3、form-4）。其他两个按钮的情况相同。

请使用 javascript 或 jquery 为我提供适当的解决方案。

我正在使用jsp页面进行html表单设计。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
    $("#b1").click(function(){
    $("#f2,#f3,#f4").hide();
    $("#f1").show();
  });

$("#b2").click(function(){
    $("#f1,#f3,#f4").hide();
    $("#f2").show();
  });

$("#b3").click(function(){
    alert("jj");
    $("#f1,#f2,#f4").hide();
    $("#f3").show();
  });



</script>
<style type="text/css">
    #f2,#f3,#f4{
    display: none;
    }
</style>
    </head>
    <body >
        <form id="f1">
        <input type="text" name="name" placeholder="f1" >
    </form>
     <form id="f2">
        <input type="text" name="name"  placeholder="f2" >
    </form>
      <form id="f3">
        <input type="text" name="name"  placeholder="f3" >
    </form>
       <form id="f4">
        <input type="text" name="name"  placeholder="f4" >
    </form>

        <input type="button" value="b1" id="b1" >
       <input type="button" value="b2" id="b2">
       <input type="button" value="b3" id="b3">


    </body>
</html>

我已经按照上面的答案完成了编码，但是当我点击时我无法获得不同的形式。我检查警报消息也单击不起作用。请告诉我哪里做错了。

【问题讨论】：

你应该先试试。
我是网络新手。如果我得到一些帮助会更温柔。我不知道如何开始？我是初学者现在尝试学习。
查看您正在使用的代码/标记很有帮助，因此我们有一些上下文。

标签： javascript jquery html forms

【解决方案1】：

这里是示例。

现场演示：http://jsfiddle.net/a6NJk/626/

HTML

为此，您需要四个表单和三个按钮：

<form id="f1">
  <input type="text" name="name" placeholder="f1" >
</form>

<form id="f2">
  <input type="text" name="name"  placeholder="f2" >
</form>

<form id="f3">
  <input type="text" name="name"  placeholder="f3" >
</form>

<form id="f4">
  <input type="text" name="name"  placeholder="f4" >
</form>

<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">

jQuery

当您单击按钮时，您需要显示相应的表单并隐藏所有其他表单。
见 jquery api：http://api.jquery.com/

$("#b1").click(function(){
    $("#f2,#f3,#f4").hide();
    $("#f1").show();
  })

$("#b2").click(function(){
    $("#f1,#f3,#f4").hide();
    $("#f2").show();
  })

$("#b3").click(function(){
    $("#f1,#f2,#f4").hide();
    $("#f3").show();
  })

CSS

 #f2,#f3,#f4{
    display: none;
    }

如果您想使用锚标记而不是按钮，请更改您的 html：

<form id="f1">
    <input type="text" name="name" placeholder="f1" >
</form>
 <form id="f2">
    <input type="text" name="name"  placeholder="f2" >
</form>
  <form id="f3">
    <input type="text" name="name"  placeholder="f3" >
</form>
   <form id="f4">
    <input type="text" name="name"  placeholder="f4" >
</form>

       <a href="javascript:void(0)" id="b1" > b1</a >
       <a href="javascript:void(0)" id="b2" > b2</a>
       <a href="javascript:void(0)" id="b3" > b3</a >

演示：http://jsfiddle.net/a6NJk/627/

【讨论】：

您好，感谢您提供的样品，它非常好。如果我有像 button1 、 button2 、 button3 这样的场景，你能帮我而不是按钮吗那么解决办法是什么
@user3311567 ：如果它有效并有助于接受我的回答:)
我已经在下面发布了我的答案，但我无法获得不同的形式。请告诉我哪里做错了。
我需要下载任何api吗？如果是请把路径发给我
我下面的帖子回答出了什么问题，我没有得到结果。