Question

我有一个表单，我需要选择一个值，我将默认值设置为选择下拉菜单＆＃34;选择＆＃34;。

如果下拉选择值=＆＃34;选择＆＃34;然后应禁用保存按钮。

其他明智的启用。

我的Html：

<select class="form-control" name="studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]">
            <option value="">Select Mode of Study</option>
                 </select>

<button ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading">Save Changes </button>

Answer 1

在使用form时，不要在特定值上停用保存按钮，而是将select标记为required。并使用placeholder进行选择。

然后将ng-disabled与$invalid结合使用，以禁用按钮，直到它具有所选值。

以下是一个示例，将其应用于您的按钮：

ng-disabled="form.userForm.$invalid"

form.userForm是您表单的name。

只有选择了一个值，您的按钮才会启用。

有关“$ invalid

的信息，请参阅this arcticle

Answer 2

您可以使用data.studymode.length＆lt;你的ng-disabled中有1个，如下所示：

<select class="form-control" name="studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]">
            <option value="">Select Mode of Study</option>
                 </select>

<button ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading || data.studymode.length < 1">Save Changes </button>

Answer 3

你也可以这样做：

function validate() {
 	var submitbutton = document.getElementById("submitbutton");
  var ddl = document.getElementById("selector");
  
  var selectedValue = ddl.options[ddl.selectedIndex].value;
  if (selectedValue == "select") {
    submitbutton.disabled = true;
  } else {
  	submitbutton.disabled = false;
  }
}

$( ".form-control" ).change(function() {
  validate();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  
  
  <select id="selector" class="form-control" name="studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]">
  <option value="select"></option>
  <option value="">Select Mode of Study</option>
</select>

<button id="submitbutton" disabled ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading">Save Changes </button>
html angularjs shareeditflag asked 1 min ago Kalaiyarasi M 408 add a comment | show 1 more comment

  
  
</body>
</html>

这很好用。 BTW我需要为选择器和按钮添加一些id来通过javascript访问它们。

我希望这会对你有所帮助。

Answer 4

试试这个

<form name="eForm">
<select class="form-control" name="eForm.studymode" ng-model="data.studymode" ng-options="studymode.id as studymode.name for studymode in studymodes" ng-disabled="!eEditMode[$index]" required> <option value="">Select Mode of Study</option> </select> <button ng-show="saveButton && eEditMode[$index]" class="btn btn-primary" type="submit" ng-click="update('education',$index);" ng-disabled="eForm.$invalid || dataLoading">Save Changes </button>

当选择下拉值为＆＃34时，如何将保存按钮设为禁用;选择＆＃34;

4 个答案: