I have a table of checkboxes. At the top is an Administrator box, then below a bunch of other permissions. If the Admin box is checked all other boxes should be checked, and if another box is unchecked then the Admin box should uncheck. I have it working on the initial click but if you click the Admin box it checks all others, then uncheck an other option it unchecks the Admin. Check the Admin a second time and nothing happens.
http://jsfiddle.net/HCpQg/1/
$("#administrator").click(function(){
if ($(this).is(':checked')) {
$('.permissions').attr('checked',true);
}
});
$(".permissions").click(function(){
if ($(this).is(':checked')) {
} else {
$('#administrator').attr('checked',false);
}
});
Use .prop() as opposed to .attr().
http://api.jquery.com/prop/
Just my 2 cents: if you use uniform styling:
$(function () {
$(":checkbox").uniform();
});
then you will need to call
$.uniform.update();
after you dynamically check/uncheck checkbox. I've just spent 6 hours trying until I dug up this bit...
Related
Instead of manually selecting the check boxes of several pages,
I am using TamperMonkey to select all the check boxes with a small Javascript function.
The checkboxes get selected but the next step (SyncNow)for the procedure is greyed out.
I think it has to do with changing classes.
Is there another way to select the checkboxes with a 'click' via TamperMonkey?
or
How do I add an extra class that will hopefully not grey out the next step?
You can see the code that I have here:
https://codepen.io/Marina_2019/pen/dxXmZL
I tried this, and it did not work:
function selectAll(){
document.getElementById("AllInventorySelected").checked = true;
}
}, false);
This function worked:
checkThem([].slice.call(document.querySelectorAll('input[type="checkbox"]')));
function checkThem(nodes) {
nodes.forEach(function(n) { n.checked = true });
}
The problem is that the next after selecting all the check boxes are greyed out (unless I do it manually).
I noticed that a class gets added if I select the check boxes manually.
Code snippets are here:
https://codepen.io/Marina_2019/pen/dxXmZL
Lets say I have the following html..
<select name="certificatesSelect"
ng-model="$ctrl.selectedCertificate"
ng-change="$ctrl.onSelectCertificate()"
ng-options="certificate as certificate.name for certificate in $ctrl.certificateDropdownOptions track by certificate.id">
<input id="certificate-upload-file-input"
type="file"
style="visibility: hidden"
accept=".der,.crt"/>
One of my options that are populated by ng-options is a "Browse..." option. When the user selects the 'Browse...' option from the select box, I want to be able to pull up the file upload window provided by the browser, i.e the same action as if the user clicked on the file type input box.
My initial attempt at this was something as follows where on my controller I had the onSelectCertificate function bound to change event of the select box.
onSelectCertificate() {
// if the selected option is the "Browse..." option
if (this.selectedCertificate.id === this.BROWSE_OPTION_ID) {
// find the input element and click on it
this.certificateFileInput = this.$element.find("input[type='file']");
this.$timeout(() => {
this.certificateFileInput.click();
}, 0);
}
}
However, this does not work. After some reading online, I believe this is because of a security concern where only a USER issued click event can trigger another click event through javascript. Therefore, the ng-change binding for the select box can not trigger my own click event through javascript. Now, my question is, are there any other ways to achieve this select box design?
Scenario is quite simple. I have edit view which comprises of select element with multiple selection. Select element looks as follows
<select class="selectpicker" multiple
ng-model="UserBeingEdited.UberTypes"
ng-options="uberType.Id as uberType.Name for uberType in UberTypes"></select>
</div>
If I press edit for specific user then showEditModal function is called and edit pop up shows up. User has his own UberTypes objects selected so I pick theirs Ids and assign to UserBeingEdited.UberTypes.
$scope.UserBeingEdited = { UberTypes: []};
$scope.showEditModal = function (user) {
for (var i = 0; i < user.UberTypes.length; i++) {
$scope.UserBeingEdited.UberTypes.push(user.UberTypes[i].Id);
}
$("#editUserModal").modal("show");
};
Unfortunately they are not selected, no matter what. Suprisingly, if I set values to property UserBeingEdited by the time of declaring then it works, items are selected.
$scope.UserBeingEdited = { UberTypes: [1,2]}; //this works
It seems like angular does not refresh selected items within UI.
EDIT:
I have two items: Uber1 and Uber2. Both items are selected but view does not reflect it. If I open drop down menu and select Uber2 it shows Uber1 selected, apparently Uber2 was selected and another click was treated as unselection. The same happens when I click Uber1 first, Uber2 shows as selected.
As above picture depicts, Uber2 is highlighted since I have just clicked it but it shows Uber1 as selected. Both were selected in User's UberTypes but view just simply does not mark them as selected.
http://jsfiddle.net/upusq8ah/7/
I use bootstrap-select.js for select element and presumably this library causes such an error since without including it, it works fine.
Solution
After a while of struggle, I accidentally ran into below workaround. You need to call refresh on selectPicker and this has to be delayed otherwise it will bring no effect.
setTimeout(function () {
$('.selectpicker').selectpicker('refresh');
}, 100);
$("#editUserModal").modal("show");
I am trying to implement the angular data-indeterminate-checkbox directive in my application from the link below.
Example Fiddle
I have added ng-change to both the parent and the children checkboxes (same event) which updates the columns in a table below. The problem is when I check/uncheck the child checkboxes, the columns appear and dissapear fine and it works ok, but when I click the select all checkbox, the action is inverted. That is, when select all is checked, all columns hidden and when unchecked, all columns are visible.
In the snippet for the directive from the fiddle link mentioned above, in the else part, if I change the modelCtrl.$setViewValue(hasChecked); to modelCtrl.$setViewValue(true);, as shown in code below, the uncheck part works, i.e when I uncheck 'Select All', all columns are hidden but when I check it, nothing happens and it does not go to the ng-change event. Any help is much appreciated.
Thanks in advance and Happy New Year 2016!!
// Determine which state to put the checkbox in
if (hasChecked && hasUnchecked) {
element.prop('checked', false);
element.prop('indeterminate', true);
if (modelCtrl) {
modelCtrl.$setViewValue(false);
}
} else {
element.prop('checked', hasChecked);
element.prop('indeterminate', false);
if (modelCtrl) {
modelCtrl.$setViewValue(true);
}
}
Solved it by putting a condition on the ng-change event of the checkboxes. Here is the snippet - (as per the example fiddle):
if(!$scope.model.people[0].allEaten){
$timeout(function(){
updateModel();
refreshColumns();
},2000);
} else {
$timeout(function(){
refreshColumns();
},2000);
}
But please feel free to comment if there is a better answer to this.
Thank you!
I'd like to create a form with checkboxes. At first it shouldnt be possible to check them. Then if you click submit they should be.
I got it working so its not clickable first with
function(e){ e.preventDefault(); }
But how do i make them clickable again after that?
That means you just want to go the the default behavior what you have removed first time. To this this you just have to do
function(e){ return true; }
Hope this work.
Easiest would be to disable the checkbox, then re-enable it when you're ready:
<input id="chk1" type="checkbox" disabled>
document.getElementById("chk1").removeAttribute("disabled");
If you're using jQuery, it would be easier to work with multiple checkboxes, and the syntax would be:
jQuery("#chk1").prop("disabled", false);
If you set your click handler to a function, just have that function prevent the click, depending on whether or not you want the boxes enabled. In your case, you said when the submit button was clicked, you want to start allowing them:
var _checkBoxesEnabled = false;
function checkBoxClicked(e) {
if (!_checkBoxesEnabled) {
e.preventDefault();
}
}
function submitButtonClicked() {
_checkBoxesEnabled = true;
}
Watch out for cross-browser compatibility - I'm spoiled by jQuery, so I don't remember exactly how the e in click handlers work with old IE versions using regular javascript.