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

时间:2014-12-11 08:09:37

标签: javascript jquery html angularjs

我有一个文本字段,下拉选择如下。

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

文本字段和选择都将返回相同的值,因此我想要一个选项,当用户在文本字段中输入名称时禁用选择,反之亦然。用户不应该在文本字段中输入名称,而是从下拉列表中选择另一个名称。您的想法将受到高度赞赏。

1 个答案:

答案 0 :(得分:0)

我会那样做。这是简单的Javascript,但如果我做对了,应该做这个工作:

&#13;
&#13;
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");  
       }  
     }
    
  }
&#13;
<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>
&#13;
&#13;
&#13;