Develop Reference

Disallow unchecking of all checkboxes in angularJS

I'm using AngularJS directive for list of checkboxes checklist-model but I need to keep at least one check box checked at all times.
I've changed the checklist-model.js by adding an if:
watch if(current.length > 1)
before removing a check:
scope.$watch(attrs.ngModel, function(newValue, oldValue) {
if (newValue === oldValue) {
return;
}
var current = getter(scope.$parent);
if (angular.isFunction(setter)) {
if (newValue === true) {
setter(scope.$parent, add(current, value, comparator));
} else {
if(current.length > 1)
{
setter(scope.$parent, remove(current, value, comparator));
}
}
}
if (checklistChange) {
checklistChange(scope);
}
});
The problem is that the UI has already changed to unchecked while the model did not change.
Anyone has an elegant suggestion (preferably without JQuery) on how to change the checkbox back to "checked" state, or even better to catch it before it changed to checked?
JSfiddle here, try to uncheck all and see that when the check boxes are all unchecked (what I'm trying to prevent) the model stays not empty (which is good but not enough)

This probably comes from asynchronous nature of angular and the library you are using. What I could find so far is some dirty workaround like this (jsfiddle): create an event where you track the clicks on input and do the following:
$scope.onclick = function(evt) {
if ($scope.user.roles.length === 1 && prevLength === 1) {
evt.preventDefault();
}
prevLength = $scope.user.roles.length;
};
then add it it to your element
ng-click="onclick($event)"
I don't say it's perfect but it works

A colleague of mine suggested to disable the checkbox once it's the only one selected, that way you both prevent the changing of the module (therefore the directive does not even need to change) and the UX is better as the user understands he can't uncheck it:
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id" ng-disabled="shouldDisable(role.id)"> {{role.text}}
$scope.shouldDisable = function(roleId) {
var isDisabled = false;
if($scope.user.roles.length === 1) {
isDisabled = $scope.user.roles.indexOf(roleId) !== -1;
}
return isDisabled;
}
See answer in this JSfiddle

At this moment, the component does not support this, but there's a discussion to implement minlength/maxlength https://github.com/vitalets/checklist-model/issues/15 and then this would be simply implemented by using checklist-minlength=1.
I also edited your proposal to implement checklistBeforeChange. I will try to handle this too in the next batch. Implemented in v0.8.0.

A nicer version to #ozba answer using the array.some function:
public atLeastOneRowEnabled(row): boolean {
//at least one row is visible except the current line
return !this.rows.some(rowIterator => rowIterator.logical_name !== row.logical_name && rowIterator.isVisible);
}

Checkbox is still showing true when unchecked jQuery

Ok, so I'm currently having an issue with the $.prop('checked') functionality. When unchecking some of my boxes, and using this function to read the checkboxes, all of them are still showing up as true when some of them should be showing up as unchecked. The part of the function that checks this is below, but some background: I'm using a table with input values in each td element and due to the way it's written, I'm having to gather all the info / validate / and check by using a td.each() function.
$("td", ele).each(function(idx){
var before = $('.e_content', this),
b_name = $('input:last[type!="hidden"], textarea:last, checkbox:last, select:last', this).attr('name'),
b_val = $('input[name="'+b_name+'"], select:last, textarea[name="'+b_name+'"]', this).val(),
b_chx = $('input:checkbox[name="'+b_name+'"]', this).prop('checked'),
after = function(){
before.hide();
$(ele).css("background", color);
$('td.edit', ele).show();
$('td.save', ele).hide();
$('span', this)
// WORKING ON TAKING THE VALUE OF THE .e_content FORM AND REPLACING THE SPAN WITH IT
.html(function(){
console.log(b_name+' : '+b_chx);
if(b_val != undefined && b_val != ''){
if(b_name == 'StageType'){
if(b_val == 1){ return 'Voice'; }
if(b_val == 2){ return 'Text'; }
if(b_val == 3){ return 'Email'; }
}
else if(b_name == 'qtrhour') {
return $('select', before).find(':selected').text();
}
else if(b_chx == true) { return '✓'; }
else if(b_chx == false) { return '✗'; }
else {
if(before.find('input:last').prop('type') != 'checkbox')
return b_val.replace(/\n\r?/g, '<br />');
}
}
})
.show();
};
$(this).html(after);
});
The problem is with this line:
b_chx = $('input:checkbox[name="'+b_name+'"]', this).prop('checked'),
It's coming up always as true even when the checkbox has been unchecked before the save button is hit. This function fires on the .save click event. Hopefully this is enough to determine what might be going wrong.

You can try the following,
$('input:checkbox[name="'+b_name+'"]', this).is(':checked');

To avoid issues regarding to checking or unchecking checkboxes, I normally use jQuery.attr()
$(...).attr('checked')
$(...).attr('checked','checked')
$(...).removeAttr('checked')
Also sometimes I check or uncheck them binding or triggering a .click() function.

javascript onchange checkboxes still select on cancel

<script>
function no_email_confirm() {
if (document.getElementsByName("no_email")[0].checked == false) {
return true;
} else {
var box= confirm("Sure?");
if (box==true)
return true;
else
document.getElementsByName("no_email")[0].checked == false;
}
}
</script>
And here is my HTML for the checkbox:
<input type="checkbox" id="no_email" name="no_email" onchange="no_email_confirm()"></input>
For some reason, this gives me the confirm pop up the first time I check the box, but not for any click after that. Also, even if I click "Cancel" it still checks the check box. I've searched on here and for some reason, no matter what I try, I can't get it to work properly.
It should confirm if they really want to check the box, if they select "Yes" then it checks it, if not, then it doesn't check it. I can get it to work without the name no_email, but I can't change that..
Anyone have any ideas?

Looks like you've got several errors in there, most notably using == when you probably meant =. Instead, add an event listener and make sure the assignment works:
var box = document.querySelector('#no_email');
box.addEventListener('change', function no_email_confirm() {
if (this.checked == false) {
return true;
} else {
var confirmation= confirm("This means that the VENDOR will NOT RECEIVE ANY communication!!!!");
if (confirmation)
return true;
else
box.checked = false;
}
});
http://jsfiddle.net/A3VGg/1/

Radio button to Prevent to be checked after on click

I am trying to prevent a radio button not to be checked if a false is returned from the onclick.
Following is the jsbin link for the code I am using.
http://jsbin.com/oruliz/2/
Is there anything I am missing; BTW, I am trying to use JS with no framework.
However, if pure js has this issue is there a workaround for prototyoe.js ?

Try this
function propertyDamageType_click(elem) {
if(yourconditionfails){ // or if(yourconditionfails && !elem.checked)
elem.checked = false;
alert('Please select an incident type');
}
}
Demo

You should user return propertyDamageType_click() .
See the http://jsbin.com/uvopek/1/edit

You can use a flag and return false whenever the pre codition is not met....
var IsIncidenntTypeSelected = 0; // flag - sets to 1 when pre condition is met
$("input[type='radio']").click(function()
{
if(IsIncidenntTypeSelected == 0)
return false;
}

Javascript loop with dynamic jquery val() not being picked up

I'm trying to pick out the value of an input box using jquery.
No probs there
$('#id_of_my_input_box_1').val();
But I need several so decided to put them into a loop:
============
var config_total_instances = '==some value='
for (var x = 1; x <= config_total_instances; x++) {
if (isset($('#id_of_my_input_box_'+x).val())) {
alert($('#id_of_my_input_box_'+x).val());
}
}
============
If I submit the form and I've got say 10 input boxes, the code above doesn't alert a value if the relevant input box has value.
I'm using a function below to check for values.
============
function isset(my_variable) {
if (my_variable == null || my_variable == '' || my_variable == undefined)
return false;
else
return true;
}
============
Am I missing something vital..? :-(
Addition: I shoudl add that I'm askign why I don't get the value of
$('#id_of_my_input_box_'+x).val()
echoed out in my alert box

Extending #Faber75's answer. You can set a class name for all your text element and then use something like this
$("input:text.clsname").each(function(){
if (isset(this.value)) {
alert(this.value);
}
});
In your current code if you are assigning a string to config_total_instances then it will not work.

don't consider my message an answer, more of a tip.
For a simplier code you could consider adding a class to the textboxes you need to check.
For example adding to all the inputs you need to check the class="sample" you could the use the jquery selector $(".sample") , returning you all the items and then you could simply do
$(".sample").length to count the items and $(".sample")[0].val() (or similar) to get/test values.
Cheers

Have you tried this? (note that there are three =)
if (my_variable === null || my_variable == '' || my_variable === undefined)
As an alternative to this try
if (typeof(my_variable) == 'null' || my_variable == '' || typeof(my_variable) == 'undefined')

Maybe I'm misunderstanding, but can't you just get all the <input>'s in a <form> that aren't :empty if that's the end goal of what you're trying to accomplish?
$('form#some_id input:not(:empty)').each(function () {
// do something with $(this).val() now that you have
// all the non-empty <input> boxes?
});
Or if you're just trying to tell if the user left some <input> blank, something like:
$('form#some_id').submit(function (e) {
if ($(this).find('input[type="radio"]:not(:checked), input[type="text"][value=""], select:not(:selected), textarea:empty').length > 0) {
e.preventDefault(); // stops the form from posting, do whatever else you want
}
});
http://api.jquery.com/category/selectors/form-selectors/