在 Angular JS 中选择另一个输入字段时禁用输入字段

Disable input field when selecting another in Angular JS

本文关键字：输入 字段 另一个 Angular JS 选择      更新时间：2023-09-26

我有一个文本字段和一个下拉选择，如下所示。

<section class="popupBody"  data-ng-controller="PostController">
 <form>
    <input class="form-control col-sm-2" type="text" ng-model="buyer_cname" placeholder="Enter Buyer's Company Name" >
    <label style="text-align:center;">Or,</label>
    <select ng-model="buyer_cname_dropdown" required>
             <option  value="">Select the Buyer From Drop Down</option>
             <option value="test1">Test1</option>
             <option value="test2">Test2</option>
             <option value="test3">Test3</option>
    </select>
 </form>
</section>

控制器

  function PostController($scope, $http, $cookieStore) {
      var token = $cookieStore.get('token');
      var conId = $cookieStore.get('Cont_Id');
      var exId = $cookieStore.get('ex_Id');
      $scope.submit_pt = function() {
          var buyer_name = $scope.buyer_cname;
          var buyer_cname = $scope.buyer_cname_dropdown;  
          var seller_name = $scope.seller_cname;
          var seller_cname = $scope.seller_cname_dropdown; 
          var description = $scope.description;
          var amount = $scope.amount;
          amount = (amount*100);
          var p_types = $scope.post_typess;
          $scope.post_transaction = [];
          var post_tran = "http://www.smple.mobi/account/post_member_transaction.html?contactid="+conId+"&exchangeid="+exId+"&token="+token+"&buyerid=21458&seller_name=eBarter%20Master%20Account&desc="+description+"&amount="+amount+"&sellerid=2951";
    $http.get(post_tran)
        .success(function(response) {
            $scope.post_transaction = response;
            console.log($scope.post_transaction);
            $('.posted').show();
            $('.posted').html('Transaction Posted');
            $('.posted').delay(4000).fadeOut();
                $scope.description = "";
            });
    }
}
文本

字段和选择将返回相同的值，因此我希望当用户在文本字段中输入名称时有一个选项来禁用选择，反之亦然。用户不应能够在文本字段中输入名称，并从下拉列表中选择另一个名称。您的想法将不胜感激。

我会这样做。它是普通的Javascript，但如果我做对了，应该可以完成这项工作：

function input(object){
    if (object.id=="text"){
       if (object.value!=""){
         document.getElementById("select").style.visibility="hidden";
         document.getElementById("select").removeAttribute("required"); 
         document.getElementById("select").setAttribute("disabled","");  
         document.getElementById("lable").style.visibility="hidden";  
       }else{
         document.getElementById("select").style.visibility="visible";  
         document.getElementById("lable").style.visibility="visible";  
         document.getElementById("select").setAttribute("required","");  
         document.getElementById("select").removeAttribute("disabled");  
       }
     }else{
       if (object.value!=""){
         document.getElementById("text").style.visibility="hidden";  
         document.getElementById("lable").style.visibility="hidden";  
         document.getElementById("text").removeAttribute("required");  
         document.getElementById("text").setAttribute("disabled","");  
       }else{
         document.getElementById("text").style.visibility="visible";  
         document.getElementById("text").setAttribute("required","");  
         document.getElementById("lable").style.visibility="visible";  
         document.getElementById("text").removeAttribute("disabled");  
       }  
     }
    
  }
<form>
    <input class="form-control col-sm-2" id="text" type="text" ng-model="buyer_cname" placeholder="Enter Buyer's Company Name" onkeyup="input(this)" required>
    <label style="text-align:center;" id="lable">Or,</label>
    <select ng-model="buyer_cname_dropdown" id="select" onchange="input(this)" required>
             <option  value="">Select the Buyer From Drop Down</option>
             <option value="test1">Test1</option>
             <option value="test2">Test2</option>
             <option value="test3">Test3</option>
    </select>
 </form>

相关文章：