Here is my issue. I am unable to trigger the checkbox select on firing an event/Function when ever the function is called. The input has to be selected like below
TS code:
check(){
this.selectAll = true;
let elements = this.hostElement.nativeElement.querySelectorAll('deltha');
for(var i=0;i<elements.length;i++){
elements[i].selected= this.selectAll;
}
}
HTML code:
<input type="checkbox" id="selectAll" [(ngModel)]="selectAll" (change)="selectAllFiles($event)" class="form-check-input deltha">
Whenever the function is called, it has to trigger and this check box has to be checked here. I am not using and reactive/template form approach as this has to be a unique one. When I am trying the above function code, it's not working and it is not giving any error as well...
I'm not really sure what's the issue here. You'll need to provide more code so we could try to reproduce your problem.
From what i see here when you change this.selectAll to true then the checkbox is selected (you don't need to do this by applying anything to the element) - you can see this in the stackbliz demo - https://stackblitz.com/edit/checkbox-selection-1?file=src/app/app.component.ts
please add more information to your question.
I am facing problem because I have a checkbox inside a div and I want to call a function in both the cases: if we change the checkbox value or click the div.
Now the problem is that, When I click the checkbox, The event is fired twice and I am not getting expected result.
<div ng-click="checkEntry(config.id)"><input type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></div>
$scope.checkEntry = function(id){
var idx = $scope.someArray.indexOf(id);
if(idx === -1){
$scope.someArray.push(id);
}else{
$scope.someArray.splice(idx, 1);
}
}
Now If i click div, it works fine and the checkbox gets selected. But if i click the checkBox, the function is called twice, and it doesn't work as expected.
Please help me with a solution
You don't need two event handler for two identical events.When you click on the input, the div will be clicked as well. so you just need to remove ng-change from your code.
<div ng-click="checkEntry(config.id)">test
<input type="checkbox" ng-model="modelCheckbox" ng-checked="checked">
and in your controller:
$scope.checked = true;
$scope.checkEntry = function(id){
$scope.checked = !$scope.checked;
}
Look at this plunker
Checkbox is situated inside of that div, so when you click checkbox you are actually clicking also on div.
Actually, in your case you can remove ng-change attribute from checkbox and it will still work, because function will be called via click on div anyway. But that is not correct way to work with checkboxes!
First question here is if you really need that div?
I would rather use label instead:
<label for="my-checkbox"><input id="my-checkbox" type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></label>
In such case it will work fine, you just need to write proper CSS to style that label correctly. This is the best and the most correct solution.
I have a repeater:
<tr data-ng-repeat="worktime in workTimesFiltered ">
Inside the repeater I have an input checkbox:
<input ng-change="updateIncludeOnInvoice(worktime.includeOnInvoice, worktime.timeType)" name='obj1_data' type="checkbox" ng-model="worktime.includeOnInvoice" ng-true-value="true" ng-false-value="false">
When it's checked I call updateIncludeOnInvoice. The problem is that I don't want it to be clickable if another worktime.timeType == "0%".
I can capture this in updateIncludeOnInvoice and have tried setting worktime.includeOnInvoice = false, but the checkbox remains on screen.
I have found a way to get access to the dom element that was clicked to manually set it back to unchecked, but it seems hacky....
What's the correct way of dealing with this?
Validate checkbox somehow before calling ng-change, if so how?
If I understand this you just want to disable the checkbox when some condition is met.
<input ng-disabled="isConditionMet()">
$scope.isConditionMet = function() {
// check your condition and return true/false
};
So I have the js-hint on my file, as well as the foldFunction
I don't want it to be an extra key set, I'd rather have it in my options panel to turn them on or off. Which brings to me to the js-hint part I want it to run all the time, instead of only when it turns on for one word.
Has anyone who has experience with this had luck on doing this? I already get how I'm going to get the foldFunction I believe:
extraKeys: { "Ctrl-Q": function (cm) { CollapseFunc(cm, cm.getCursor().line); },"Ctrl-Space": "autocomplete" }
Turning that to this:
var a= document.getElementById('checkmark');
if(a.checked === true){
CodeMirror.defineOptions...
}
I'm not sure how to further this as I'm not positive that defining the Option foldGutter to false will work as its altered after the page has load.
Does anyone have any suggestions?
After code mirror is instantiated you can enable or disable foldGutter using the codemirror setOption method. The following codemirror event handler will fire whenever new input is read from the hidden text field. If the checkbox is checked and the autocomplete menu is not already open, the execCommand method will be fired opening the autocomplete menu. This will result in hints as you type. I've added this to my implementation of codemirror and will test it out.
<label><input type="checkbox" id="AutoCompleteEnabled" /> Enable Autocomplete </label>
<label><input type="checkbox" id="FoldGutterEnabled" /> Enable Code Folding </label>
<script>
$(function(){
$("#FoldGutterEnabled").on("click", function(){
CM.setOption("foldGutter", this.checked);
});
CM.on("inputRead", function(cm){
// Show the autocomplete menu when input is changed if the Enable Auto Hint checkbox is checked and the autocomplete menu is not already open.
if($("#AutocompleteEnabled:checked").length==1 && $(".CodeMirror-hints").length==0) CM.execCommand("autocomplete");
});
});
</script>
Let me know if you were looking for something different.
I have been asked to disable the "ticking" of a checkbox. I am not being asked to disable the checkbox, but to simply disable the "ticking".
In other words, a user will think that a checkbox is tickable, but it is not. Instead, clicking on the checkbox will cause a modal dialog to appear, giving the user more options to turn on or off the feature that the checkbox represents. If the options chosen in the dialog cause the feature to be turned on, then the checkbox will be ticked.
Now, the real problem is that for a split second, you can still see that the checkbox is being ticked.
I have tried an approach like this:
<input type='checkbox' onclick='return false' onkeydown='return false' />
$('input[type="checkbox"]').click(function(event) {
event.preventDefault();
alert('Break');
});
If you run this, the alert will appear, showing that the tick is visible (the alert is just there to demonstrate that it still does get ticked, in production, the alert is not there). On some users with slower machines and/or in browsers with slow renderers/javascript, users can see a very faint flicker (the flicker sometimes lasts for half a second, which is noticeable).
A tester in my team has flagged this as a defect and I am supposed to fix it. I'm not sure what else I can try to prevent the tick in the checkbox from flickering!
From my point of view it is as simple as:
$(this).prop('checked', !$(this).prop('checked'));
Works both for checked and unchecked boxes
Try
event.stopPropagation();
http://jsfiddle.net/DrKfE/3/
Best solution I've come up with:
$('input[type="checkbox"]').click(function(event) {
var $checkbox = $(this);
// Ensures this code runs AFTER the browser handles click however it wants.
setTimeout(function() {
$checkbox.removeAttr('checked');
}, 0);
event.preventDefault();
event.stopPropagation();
});
This effect can't be suppressed I fear. As soon as you click on the checkbox, the state (and rendering) is changed. Then the event handlers will be called. If you do a event.preventDefault(), the checkbox will be reset after all the handlers are executed. If your handler has a long execution time (easily testable with a modal alert()) and/or the rendering engine repaints before reseting, the box will flicker.
$('input[type="checkbox"]').click(function(event) {
this.checked = false; // reset first
event.preventDefault();
// event.stopPropagation() like in Zoltan's answer would also spare some
// handler execution time, but is no more needed here
// then do the heavy processing:
alert('Break');
});
This solution will reduce the flickering to a minimum, but can't hinder it really. See Thr4wn's and RobG's answer for how to simulate a checkbox. I would prefer the following:
<button id="settings" title="open extended settings">
<img src="default_checkbox.png" />
</button>
document.getElementById("settings").addEventListener("click", function(e) {
var img = this.getElementsByTagName("img")[0]);
openExtendedSettingsDialog(function callbackTick() {
img.src = "checked_checkbox.png";
}, function callbackUntick() {
img.src = "unchecked_checkbox.png";
});
}, false);
It is very important to use return false at the end.
Something like this:
$("#checkbox").click((e) => {
e.stopPropagation();
return false;
});
Isn't is simpler ? :
<input type="checkbox" onchange="this.checked = !this.checked">
TL:DR;
HTML api's execute before JavaScript. So you must use JavaScript to undo HTML's changes.
event.target.checked = false
WHAT is the problem?
Strictly speaking: we cannot "stop" the checkbox from being ticked. Why not? Because "being ticked" exactly means that the DOM's, HTML <input> element has a checked property value of true or false, which is immediately assigned by the HTML api
console.log(event.target.checked) // will be opposite of the previous value
So it's worth explicitly mentioning this HTML api is called before scripts. Which is intuitive and should make sense, because all JavaScript files are themselves the assignment of a <script> element's attribute src, and the ancestral relationship in the DOM tree, between your <input> in question, and the <script> element running your JavaScript, is extremely important to consider.
HOW to get our solution
The HTML assigned value has not yet been painted before we have a chance to intercept the control flow (via JS file like jQuery), so we simply re-assign the checked property to a boolean value we want: false (in your case).
So in conclusion, we CAN, in-effect, "stop" the checkbox from being checked, by simply ensuring that the checked property is false on the next render and thus, won't see any changes.
Why not simply add a class in your CSS that sets pointer-events: none;?
Something like:
<style>
input.lockedCbx { pointer-events: none; }
</style>
...
<input type="checkbox" class="lockedCbx" tabindex=-1 />
...
You need the tabindex=-1 to prevent users from tabbing into the checkbox and pressing a space bar to toggle.
Now in theory you could avoid the class and use the tabindex=-1 to control the disabling as in:
<script>
input[type="checkbox"][tabindex="-1"] { pointer-events: none; }
</script>
With CSS, you can change the image of the checkbox. See http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ and also CSS Styling Checkboxes .
I would disable the checkbox, but replace it with an image of a working checkbox. That way the checkbox doesn't look disabled, but won't be clickable.
Wrap the checkbox with another element that somehow blocks pointer events (probably via CSS). Then, handle the wrapper's click event instead of the checkbox directly. This can be done a number of ways but here's a relatively simple example implementation:
$('input[type="checkbox"').parent('.disabled').click( function() {
// Add in whatever functionality you need here
alert('Break');
});
/* Insert an invisible element that covers the checkbox */
.disabled {
position: relative;
}
.disabled::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only wrapped checkboxes are "disabled" -->
<input type="checkbox" />
<span class="disabled"><input type="checkbox" /></span>
<input type="checkbox" />
<span class="disabled"><input type="checkbox" /></span>
<span class="disabled"><input type="checkbox" /></span>
<input type="checkbox" />
Note: You could also add the wrapper elements programmatically, if you would like.
Sounds to me like you are using the wrong interface element, a more suitable one would be a button that is disabled by default, but enabled when that option is available. The image displayed can be whatever you want.
<button disabled onclick="doSomething();">Some option</button>
When users have selected that feature, enable the button. The image on the button can be modified by CSS depending on whether it's enabled or not, or by the enable/disable function.
e.g.
<script type="text/javascript">
function setOption(el) {
var idMap = {option1:'b0', option2: 'b1'};
document.getElementById(idMap[el.value]).disabled = !el.checked;
}
</script>
<div><p>Select options</p>
<input type="checkbox" onclick="setOption(this);" value="option1"> Option 1
<br>
<input type="checkbox" onclick="setOption(this);" value="option2"> Option 2
<br>
</div>
<div>
<button id="b0" onclick="alert('Select…');" disabled>Option 1 settings</button>
<button id="b1" onclick="alert('Select…');" disabled>Option 2 settings</button>
</div>
The Event.preventDefault method should work for change, keydown, and mousedown events, but doesn't in my testing.
My solution to this problem in a Mozilla Firefox 53.0 extension was to toggle an HTML class that enabled/disabled the CSS declaration pointer-events: none being applied to the checkbox. This addresses the cursor-based case, but not the key-based case. See https://www.w3.org/TR/SVG2/interact.html#PointerEventsProp.
I addressed the key-based case by adding/removing an HTML tabindex="-1" attribute. See https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex.
Note that disabling pointer-events will disable your ability to trigger CSS cursors on hover (e.g., cursor: not-allowed). My checkbox was already wrapped in a span element, so I added an HTML class to that span element which I then retargeted my CSS cursor declaration onto.
Also note that adding a tabindex="-1" attribute will not remove focus from the checkbox, so one will need to explicitly defocus it by using the HTMLElement.blur() method or by focusing another element to prevent key-based input if the checkbox is the active element at the time the attribute is added. Whether or not the checkbox is the focused element can be tested with my_checkbox.isEqualNode(document.activeElement).
Simply revert the value back
$('input[type="checkbox"]').on('change', function(e) {
if (new Date().getDate() === 13) {
$(this).prop('checked', !$(this).prop('checked'));
e.preventDefault();
return false;
}
// some code here
});
Add this to click event in js file
event.stopPropagation();
$('#term-input').on('change click',function (e){
e.preventDefault();
})
works for me