如何在选择下拉值值“选择”时保存按钮作为禁用。答案

【问题标题】：How to make save button as disable when select dropdown value is "select"如何在选择下拉值值“选择”时保存按钮作为禁用。
【发布时间】：2016-07-04 12:21:37
【问题描述】：

我有一个表单，我需要选择一个值，并且我将选择下拉列表的默认值设置为“选择”。

如果下拉选择值 = "select" 则应禁用保存按钮。

其他方式启用。

我的 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>

【问题讨论】：

能不能也贴一下你试过的角码？

标签： html angularjs

【解决方案1】：

试试这个

<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>

【讨论】：

谢谢你我明白了

【解决方案2】：

当您使用form 时，不要禁用某个值的保存按钮，而是将您的select 标记为required。并使用placeholder 供您选择。

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

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

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

其中form.userForm 是您的表单的name。

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

有关 `$invalid

的信息，请参阅 this arcticle

【讨论】：

【解决方案3】：

您可以在您的 ng-disabled 中使用 data.studymode.length

<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>

【讨论】：

【解决方案4】：

你也可以这样做：

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>

这很好用。顺便说一句，我需要为选择器和按钮添加一些 id 以通过 javascript 访问它们。

希望对你有帮助。

【讨论】：

它不在 angularjs 中。它是 jquery 中的示例。