必需的复选框组
required checkbox group
我正在尝试验证一组复选框,其中至少需要一个。这是我的复选框的 HTML:
<fieldset class="requiredcheckboxgroup">
<legend>How did you come into contact with VK?*</legend>
<input ng-model="application.contact.relations" group-required required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br>
<input ng-model="application.contact.employees" group-required required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br>
<input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled />
<input ng-model="application.contact.jobad" group-required required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad<br>
<input ng-model="application.contact.website" group-required required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website<br>
<input ng-model="application.contact.other" group-required required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other<br>
</fieldset>
如您所见,我所有的复选框都具有 必需属性 和 组必需属性 。我有这样的指令:
angular.module('dxs-vkgroupApp').directive('groupRequired', group_required);
function group_required() {
return {
restrict: 'A',
link: function(scope, element, attr) {
var requiredCheckboxes = jQuery('.requiredcheckboxgroup :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
}
else {
requiredCheckboxes.attr('required', 'required');
}
});
}
};
}
问题是它们都必须选择才能使表格有效...。选择一个时,必需的属性被正确删除,但当我尝试提交表单时,他仍然无效。
我该如何解决这个问题?或者有更好的方法解决这个问题吗?
您可以尝试创建一个函数来确定是否已选中任何复选框:
angular('module').controller('MyController', function(){
this.application = { contact: {} };
this.noneSelected = function () {
return !(application.contact.relations || application.contact.employees) /* ... */;
}
}
然后在你的 html:
<div ng-controller="MyController as ctrl">
<fieldset class="requiredcheckboxgroup">
<legend>How did you come into contact with VK?*</legend>
<input ng-model="ctrl.application.contact.relations" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br>
<input ng-model="ctrl.application.contact.employees" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br>
<!-- .... -->
</fieldset>
</div>
该指令应绑定更改事件。应该是这样
<fieldset class="requiredcheckboxgroup">
<legend>How did you come into contact with VK?*</legend>
<input ng-model="application.contact.relations" ng-required="selected" group-required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations
<br>
<input ng-model="application.contact.employees" ng-required="selected" group-required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees
<br>
<input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled />
<input ng-model="application.contact.jobad" ng-required="selected" group-required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad
<br>
<input ng-model="application.contact.website" ng-required="selected" group-required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website
<br>
<input ng-model="application.contact.other" ng-required="selected" group-required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other
<br>
</fieldset>
指令应该是
var app = angular.module('dxs-vkgroupApp', []);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.selected = true;
}]);
app.directive('groupRequired', group_required);
function group_required() {
return {
restrict: 'A',
link: function(scope, element, attr) {
element.bind("change", function(){
var requiredCheckboxes = jQuery('.requiredcheckboxgroup input:checked').length;
if(requiredCheckboxes > 0)
scope.selected = false;
else
scope.selected = true;
scope.$apply();
})
}
};
}
我正在尝试验证一组复选框,其中至少需要一个。这是我的复选框的 HTML:
<fieldset class="requiredcheckboxgroup">
<legend>How did you come into contact with VK?*</legend>
<input ng-model="application.contact.relations" group-required required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br>
<input ng-model="application.contact.employees" group-required required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br>
<input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled />
<input ng-model="application.contact.jobad" group-required required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad<br>
<input ng-model="application.contact.website" group-required required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website<br>
<input ng-model="application.contact.other" group-required required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other<br>
</fieldset>
如您所见,我所有的复选框都具有 必需属性 和 组必需属性 。我有这样的指令:
angular.module('dxs-vkgroupApp').directive('groupRequired', group_required);
function group_required() {
return {
restrict: 'A',
link: function(scope, element, attr) {
var requiredCheckboxes = jQuery('.requiredcheckboxgroup :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
}
else {
requiredCheckboxes.attr('required', 'required');
}
});
}
};
}
问题是它们都必须选择才能使表格有效...。选择一个时,必需的属性被正确删除,但当我尝试提交表单时,他仍然无效。
我该如何解决这个问题?或者有更好的方法解决这个问题吗?
您可以尝试创建一个函数来确定是否已选中任何复选框:
angular('module').controller('MyController', function(){
this.application = { contact: {} };
this.noneSelected = function () {
return !(application.contact.relations || application.contact.employees) /* ... */;
}
}
然后在你的 html:
<div ng-controller="MyController as ctrl">
<fieldset class="requiredcheckboxgroup">
<legend>How did you come into contact with VK?*</legend>
<input ng-model="ctrl.application.contact.relations" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br>
<input ng-model="ctrl.application.contact.employees" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br>
<!-- .... -->
</fieldset>
</div>
该指令应绑定更改事件。应该是这样
<fieldset class="requiredcheckboxgroup">
<legend>How did you come into contact with VK?*</legend>
<input ng-model="application.contact.relations" ng-required="selected" group-required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations
<br>
<input ng-model="application.contact.employees" ng-required="selected" group-required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees
<br>
<input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled />
<input ng-model="application.contact.jobad" ng-required="selected" group-required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad
<br>
<input ng-model="application.contact.website" ng-required="selected" group-required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website
<br>
<input ng-model="application.contact.other" ng-required="selected" group-required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other
<br>
</fieldset>
指令应该是
var app = angular.module('dxs-vkgroupApp', []);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.selected = true;
}]);
app.directive('groupRequired', group_required);
function group_required() {
return {
restrict: 'A',
link: function(scope, element, attr) {
element.bind("change", function(){
var requiredCheckboxes = jQuery('.requiredcheckboxgroup input:checked').length;
if(requiredCheckboxes > 0)
scope.selected = false;
else
scope.selected = true;
scope.$apply();
})
}
};
}