Question

我想在每次单击链接时禁用表单中的特定字段

以下是链接：

<ul id="links">
  <li class="dropdown">
    <a class="active" data-toggle="dropdown" href="#" role="button"> Form Type 1</a>
    <div class="dropdown-menu">
      <a id="drop1" href="#dropdown1">Form #1</a>
      <a id="drop2" href="#dropdown2">Form #2</a>
      <a id="drop3" href="#dropdown3">Form #3</a>
    </div>
  </li>
  <li class="dropdown">
    <a class="" data-toggle="dropdown" href="#" role="button"> Form Type 2</a>
    <div class="dropdown-menu">
      <a id="drop4" href="#dropdown4">Form #4</a>
      <a id="drop5" href="#dropdown5">Form #5</a>
    </div>
  </li>
</ul>

这是表格：

<form method="post" action="add.php" class="form" id="megaform">
    <div class="form-group">
      <label>Name</label>
      <input type="text" id="Name" name="Name" maxlength="50">
    </div>
    <div class="form-group">
      <label>Location</label>
      <input type="text" id="Location" name="Location" maxlength="75">
    </div>
    <div class="form-group">
      <label>Product</label>
      <input type="text" id="Product" name="Product" maxlength="100">
    </div>
    <div class="form-group">
      <label>Age</label>
      <input type="text" id="Age" name="Age" maxlength="2">
    </div>

因此，例如，默认情况下它将启用Form #1并禁用产品和年龄，当我单击链接Form #2时将启用产品和年龄并禁用位置等。

编辑：我一直在尝试使其与以下代码一起使用，但失败了：

<script>
  $("#drop2").click(function(){
      $("#Location").prop("disabled", true\false);
  });
</script>

Answer 1

$(document).ready(function(){
    $("a").on("click", function(){
       var formId  = $(this).attr('id');
       if(formId == 'drop1'){ //whatever id you want
       	$('input[type=text]').each(function(){
        	var inputId = $(this).attr('id');
            
            if( inputId == 'Product' || inputId == 'Age' ){ 
            		$(this).prop('disabled',true);
            }else{
            	   $(this).prop('disabled',false);
            }
        })
       }else if(formId == 'drop2'){ //whatever id you want
       	  $('input[type=text]').each(function(){
         	 var inputId = $(this).attr('id');
              if( inputId == 'Location'){ 
                      $(this).prop('disabled',true);
              }else{
                     $(this).prop('disabled',false);
              }
         })
       }
    });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="links">
  <li class="dropdown">
    <a class="active" data-toggle="dropdown" href="#" role="button"> Form Type 1</a>
    <div class="dropdown-menu">
      <a id="drop1" href="#dropdown1">Form #1</a>
      <a id="drop2" href="#dropdown2">Form #2</a>
      <a id="drop3" href="#dropdown6">Form #3</a>
    </div>
  </li>
  <li class="dropdown">
    <a class="" data-toggle="dropdown" href="#" role="button"> Form Type 2</a>
    <div class="dropdown-menu">
      <a id="drop4" href="#dropdown10">Form #4</a>
      <a id="drop5" href="#dropdown11">Form #5</a>
    </div>
  </li>
</ul>
<form method="post" action="add.php" class="form" id="megaform">
    <div class="form-group">
      <label>Name</label>
      <input type="text" id="Name" name="Name" maxlength="50">
    </div>
    <div class="form-group">
      <label>Location</label>
      <input type="text" id="Location" name="Location" maxlength="75">
    </div>
    <div class="form-group">
      <label>Product</label>
      <input type="text" id="Product" name="Product" maxlength="100">
    </div>
    <div class="form-group">
      <label>Age</label>
      <input type="text" id="Age" name="Age" maxlength="2">
    </div>
</form>
</body>
</html>

通过单击链接禁用字段

1 个答案: