填充时禁用其他文本字段的文本字段

时间：2015-09-24 13:14:34

标签： jquery 

<div class="col-lg-6" style="padding-left: 0 !important;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    WKM
                </div>

                <div class="panel-body">
                    <div class="form-group">
                        <label for="hsDetailsForm-wkmCode">Cod WKM</label>
                        <input type="text" class="form-control" id="hsDetailsForm-wkmCode" ng-model="hydroStation.wkmCode" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6" style="padding-right: 0 !important;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    WATMAN
                </div>

                <div class="panel-body">
                    <div class="form-group">
                        <label for="hsDetailsForm-groupId">Grup</label>
                        <input type="number" step="1" class="form-control" id="hsDetailsForm-groupId" ng-model="hydroStation.groupId" />
                    </div>

                    <div class="form-group">
                        <label for="hsDetailsForm-dataLoggerId">Data Logger</label>
                        <input type="number" step="1" class="form-control" id="hsDetailsForm-dataLoggerId" ng-model="hydroStation.dataLoggerId" />
                    </div>
                </div>
            </div>
        </div>

所以我有这两个面板，第一个有一个输入文本字段，另一个有两个。我想要的是当你在面板1内的文本字段内键入内容时，面板2中的两个应该被禁用，反之亦然。我已经搜索了但无法弄清楚

6 个答案:

答案 0 :(得分：1)

function disable(id) {
  if(id == "hsDetailsForm-wkmCode") {
    if (document.getElementById("hsDetailsForm-wkmCode").value == "") {
        document.getElementById("hsDetailsForm-groupId").disabled = false;
        document.getElementById("hsDetailsForm-dataLoggerId").disabled = false;
    } else {
        document.getElementById("hsDetailsForm-groupId").disabled = true;
        document.getElementById("hsDetailsForm-dataLoggerId").disabled = true;
    }
  } else {
      if (document.getElementById("hsDetailsForm-groupId").value == "" && document.getElementById("hsDetailsForm-dataLoggerId").value == "" ) {
          document.getElementById("hsDetailsForm-wkmCode").disabled = false;
      } else {
        document.getElementById("hsDetailsForm-wkmCode").disabled = true;
      }
  }
}

没有jquery，这会有所帮助。

答案 1 :(得分：0)

我会用jquery做到这一点：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6" style="padding-left: 0 !important;">
  <div class="panel panel-default">
    <div class="panel-heading">
      WKM
    </div>

    <div class="panel-body">
      <div class="form-group">
        <label for="hsDetailsForm-wkmCode">Cod WKM</label>
        <input type="text" class="form-control" id="hsDetailsForm-wkmCode" ng-model="hydroStation.wkmCode" />
      </div>
    </div>
  </div>
</div>

<div class="col-lg-6" style="padding-right: 0 !important;">
  <div class="panel panel-default">
    <div class="panel-heading">
      WATMAN
    </div>

    <div class="panel-body">
      <div class="form-group">
        <label for="hsDetailsForm-groupId">Grup</label>
        <input type="number" step="1" class="form-control" id="hsDetailsForm-groupId" ng-model="hydroStation.groupId" />
      </div>

      <div class="form-group">
        <label for="hsDetailsForm-dataLoggerId">Data Logger</label>
        <input type="number" step="1" class="form-control" id="hsDetailsForm-dataLoggerId" ng-model="hydroStation.dataLoggerId" />
      </div>
    </div>
  </div>
</div>
<script>
  $(document).onLoad(function() {
    $("#hsDetailsForm-wkmCode").on('input propertychange paste', function() {
      $("#hsDetailsForm-groupId").prop("disabled", true);
      $("#hsDetailsForm-dataLoggerId").prop("disabled", true);
      $("#hsDetailsForm-groupId").attr("readonly", "readonly");
      $("#hsDetailsForm-dataLoggerId").attr("readonly", "readonly");
    });
  });
</script>

您还可以使用jquery为您的元素添加css类，以便用户看到输入已被禁用。

答案 2 :(得分：0)

为此，您可以添加以下代码。

 <script type="text/javascript">
  $(document).ready(function(){
        $("#hsDetailsForm-wkmCode").on('input', function(){
      $("#hsDetailsForm-groupId").prop("disabled", true);
      $("#hsDetailsForm-dataLoggerId").prop("disabled", true);
     });
   });
  </script>

答案 3 :(得分：0)

您可以使用以下方法禁用输入。

＆＃13;
＆＃13; 
$(document).ready(function(){		
	$('#hsDetailsForm-wkmCode').keyup(function(){
		if($(this).val().length >0){
			//alert("sdfg");
			$("#hsDetailsForm-groupId, #hsDetailsForm-dataLoggerId").attr('disabled','disabled');
		}else{
				$("#hsDetailsForm-groupId, #hsDetailsForm-dataLoggerId").removeAttr('disabled','disabled');
			}
	});
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-lg-6" style="padding-left: 0 !important;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    WKM
                </div>

                <div class="panel-body">
                    <div class="form-group">
                        <label for="hsDetailsForm-wkmCode">Cod WKM</label>
                        <input type="text" class="form-control" id="hsDetailsForm-wkmCode" ng-model="hydroStation.wkmCode" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6" style="padding-right: 0 !important;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    WATMAN
                </div>

                <div class="panel-body">
                    <div class="form-group">
                        <label for="hsDetailsForm-groupId">Grup</label>
                        <input type="number" step="1" class="form-control" id="hsDetailsForm-groupId" ng-model="hydroStation.groupId" />
                    </div>

                    <div class="form-group">
                        <label for="hsDetailsForm-dataLoggerId">Data Logger</label>
                        <input type="number" step="1" class="form-control" id="hsDetailsForm-dataLoggerId" ng-model="hydroStation.dataLoggerId" />
                    </div>
                </div>
            </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

使用JQuery。功能：当#hsDetailsForm-wkmCode文本框的值长度大于0时，禁用其他两个文本框。如果2个数字文本框中任何一个的值的长度，则禁用顶部文本框。

＆＃13;
＆＃13; 
$(document).ready(function() {
    $("#hsDetailsForm-wkmCode").on('keyup', function(){
        if($(this).val().length > 0 ){
            $("#hsDetailsForm-groupId").prop("disabled", true);
            $("#hsDetailsForm-dataLoggerId").prop("disabled", true);
        }
        else {
        	$("#hsDetailsForm-groupId").prop("disabled", false);
            $("#hsDetailsForm-dataLoggerId").prop("disabled", false);
        }
    });
    $("#hsDetailsForm-groupId, #hsDetailsForm-dataLoggerId").on('change keyup', function(){
        if($("#hsDetailsForm-groupId").val().length > 0 || $("#hsDetailsForm-dataLoggerId").val().length > 0 ){
            $("#hsDetailsForm-wkmCode").prop("disabled", true);
        }
        else {
        	$("#hsDetailsForm-wkmCode").prop("disabled", false);
        }
    });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6" style="padding-left: 0 !important;">
    <div class="panel panel-default">
        <div class="panel-heading">
            WKM
        </div>

        <div class="panel-body">
            <div class="form-group">
                <label for="hsDetailsForm-wkmCode">Cod WKM</label>
                <input type="text" class="form-control" id="hsDetailsForm-wkmCode" ng-model="hydroStation.wkmCode" />
            </div>
        </div>
    </div>
</div>

<div class="col-lg-6" style="padding-right: 0 !important;">
    <div class="panel panel-default">
        <div class="panel-heading">
            WATMAN
        </div>

        <div class="panel-body">
            <div class="form-group">
                <label for="hsDetailsForm-groupId">Grup</label>
                <input type="number" step="1" class="form-control" id="hsDetailsForm-groupId" ng-model="hydroStation.groupId" />
            </div>

            <div class="form-group">
                <label for="hsDetailsForm-dataLoggerId">Data Logger</label>
                <input type="number" step="1" class="form-control" id="hsDetailsForm-dataLoggerId" ng-model="hydroStation.dataLoggerId" />
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

如果使用角度尝试以下示例希望它有帮助。

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app>
  <input ng-keyup="button1=true" ng-disabled="button" required ng-init="button=false">

  </br>
  <input class="btn" ng-keyup="button=true" ng-disabled="button1" required ng-init="button=false">
  <input ng-keyup="button=true" ng-disabled="button1" required ng-init="button=false">

</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题