Unable to check and uncheck the dynamically rendered checkboxes in react - javascript

I am iterating over the permissions and make checkbox checked if permission included in a predefined values(i.e val) and make checkbox unchecked otherwise, which it did well, but when I click the rendered checkboxes to check or to uncheck it do nothing.
I can't check or uncheck after I rendered my checkboxes. I need your help , thanks.

Your role.permissions is never getting updated, so the checkbox checked attribute stays as its initial value. Are you using controlled components? If so, you can add an onChange event handler to your input to update your role.permissions.

Firstly, the ternary operation in checked={role?.permissions?.includes(val[i]) ? true : false} is redundant and can be simplified to just checked={role?.permissions?.includes(val[i])}, since the value of that property will be either true or false anyway.
Secondly, by setting value= to true or false, you are freezing the checkbox to that value. You can omit that setting, as the value attribute will be submitted according to the checked or unchecked value. Also, typically you assign value=checked or value=unchecked, not true and false.

use map function and useState to control your checkbox values.

Related

Ionic 5, ionic checkbox so late behavior

I tried to bind checked attribute value on ion-checbox but the behavior is a bit late.
On my ts file I have an array variable user_id and on my checkbox list i put an action to fill this array depend on which checkbox is checked, and then verify to make the value of checked attribute:
<ion-checkbox [checked]="user_id.includes(user.id) ? true : false" (click)="AddUser(user)"><ion-checkbox>
the user_idis filled and the value of checked change but the checkbox seem not checked, and when i tried to recheck the checkbox, the value change to false but the checkbox seem checked.
I've put some functionality to make condition (example variable type)if the value is true so the checkboxlist is not shown, and with that functionality, when the value of type switch from false to true, the checkbox work well but the behavior is bit late at the moment when the checbox is checked for the first time
TL;DR
click event is working properly with my checkbox and retrieving data is not consistent
Please refer to Ionic documentation on ion-checkbox
using the (click) to capture the action on a checkbox is wrong.
I suggest you use (ionChange) event to trigger your addUser() function.
With [(checked)] binding, it will create an automatic sync between your actions and the values you save.

Keep checkbox unchecked until onclick function returns true with AngularJS

Using AngularJS framework, in my HTML code I have this checkbox:
<input type="checkbox" ng-checked="switch.isOn()" ng-click="SwitchController.setValue()">
When clicked, the checkbox is checked/unchecked before the setValue function get executed. I want the checkbox not to be checked if the setValue() function returns false value.
You can use ng-true-value and ng-false-value along with ng-model.
If you get false value from your function just set the ng-model to constant you've specified in ng-false-value.
Also you can use ng-disabled and set it true for the duration between right after entering the SwitchController.setValue() and the same function returning the value to prevent unwanted clicks.
This won't exactly delay the clicking of checkbox but should get you the desired end result.

jQuery can't decide how it would like to handle buttons

Simple prospect. Checking a checkbox enables a disabled button. Unchecking the box disables the button once more.
Code:
jQuery ->
$('#subscribe_button').attr('disabled','disabled')
$("[name=chkACCEPT]").click ->
if $(this).attr("checked")=="checked"
$('#subscribe_button').removeAttr('disabled')
else
$('#subscribe_button').attr('disabled','disabled')
I have also tried to use prop in lieu of attr. Seems like such a simple thing. Enable and disable a button. I've put alerts in there, and I know the code is firing. Just failing to do what I want it to.
Instead of using attr(), you need to use .prop() to set the disabled status
$('#subscribe_button').prop('disabled', true)
$("[name=chkACCEPT]").click ->
$('#subscribe_button').prop('disabled', !this.checked)
Also use the checked property of the dom element to check whether the checkbox is checked or not
In your example you are setting disabled="disabled" however the correct way to do it is disabled="true". You can use the this.checked value to set the disabled attribute on the button element:
$('#subscribe_button').attr('disabled', true)
$("input[name=chkACCEPT]").click ->
$('#subscribe_button').attr('disabled', !this.checked)
See the jsFiddle here, button is enabled only when the checkbox is checked.

Jquery attr function vs. is function

When testing whether a specific element is checked or not in html using jquery
What is the difference between
$(elem).attr('checked') and $(elem).is(':checked') ?
.attr will check the actual checked attribute, although it's worth mentioning that .attr has been replaced with .prop for checking such attributes. .is checks the state of the element.
All in all, you should use this.checked if inside the actual element.
$(elem).attr('checked') gets the value of the checked attribute, whereas $(elem).is(':checked') checks to see whether the element is actually checked or not.
You should try console.log these next time but basically one returns the value and the other one returns true\ false
attr() get/sets the element's attribute. When a user checks or unchecks a checkbox, the checked property is changed, not the attribute. is(':checked') reads the checked property, which could also be done as .prop('checked') or elem.checked.

how do I grab the value of a checkbox using javascript?

I have a javascript that needs to grab the value of a checkbox when its checked and ignore its value when its not checked.
Right now i'm grabbing the value of the checkbox with:
$("input[name='tos']:checked").val()
It works when you check the box and submit the form, but if you uncheck it and resubmit the form the old value of "agree" is given. So i'm wondering how to I grab the value of a checkbox only when its checked?
http://jsfiddle.net/dqy5H/
Here is an example fiddle. Sorry for the bad first response.
Don't forget that unchecked checkboxes don't travel in form submission. Your code is ok, but you may have the old value stored on server side.
A workaround is tht you could have an <input type="hidden"/> that changes its value when you check/uncheck the checkbox, and read this hidden on the server. Or simply, ask if the checkbox arrived to the server, if it didn't it means it was unchecked.
Hope this helps. Cheers
Two things, in order of least to most helpful :)
A checkbox should never return a value of "agree"! I'm hoping you misspoke.
I'm not sure the jQuery selector you used there is actually valid. As the other fellow mentions, it is but it only ever sets the value when it's checked. Oof, my bad. In any case, I'd still recommend giving the checkbox an ID/unique class, and then do:
var checked = $('#toscheckbox').val();
You can add IDs without messing up the form's submission data, and I prefer them - names are so fiddly.
Try giving it an id and calling .is(':checked') like in this article to see if it is checked or not.
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html

Categories