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

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.

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.

Need to find where my radio option CHECKED value gets changed

Is there way that i could identify where a radio option value gets changed, either thru watch expression on firebug or inspect element ?
i am remote debugging a website and there are 4 radion buttons in the website. We set the CHECKED property for my 4th option as true, it gets checked. But after a sometime(1 sec) my first option gets selected automatically. There are too many javascript code involved and i am not sure where to check.
So is there any way i can do a debug-BREAK when a watch expression fires or any other way to debug this?
You can do this using jquery:
$('input[type=radio][name="inputName"]').on('change',function(){
//#myForm is the id of the form that the radio box in
alert($('input[name="inputName"]:checked', '#myForm').val());
});
This will alert the new value of the radio box when changed JsFiddle

html radio button checked issue

I have a couple of radio buttons in my application and by default none of them is checked. When I check one of them, and call a javascript to see which is checked, the radio button which is checked does not show checked in JS or HTML Markup(F12). I dont knw what's causing this wierd issue. Kindly assist.
Thanks
EDIT: i'm using the following JS to see if the parent container of the radio buttons has "CHECKED" in its innerHTML.
if( document.getElementById('ctl00_ContentPlaceHolder1_' +
controlid).cells[cv].innerHTML.indexOf("CHECKED") > -1)
You can use this code to check if a checkbox is checked:
if (document.getElementById('checkboxId').checked == true)
//Code here...
The DOM-attribute "checked" does not change when you click the checkbox, it's used to know how it should be initialised.
In JQuery there is a convenient selector for that.
$("input:checked").each(function(i,v){
console.log(v.value);
})
Here is an example:
http://jsfiddle.net/f369xbt5/3/

HTML Checkbox Click() Return FALSE or TRUE instead of READONLY or DISABLED using jQuery

Since I don't have enough points to leave a comment, I must ask a question. The situation I'm referencing can be seen here LINK. And I promise that I've Googled for hours before posting a question.
I'm trying to be able to "toggle" HTML checkboxes to be readonly. Here is where I am so far.
"DISABLED" is NOT an option. It won't post with the form.
"READONLY" is NOT really readonly. It may gray-out, but it can still be clicked.
The only thing that seems to work is what the LINK refers to and that is applying READONLY to the checkboxes and then some jQuery like:
$(':checkbox[readonly=readonly]').click(function(){return false;}); or $(':checkbox[readonly=readonly]').click(function(){return true;});
I've also messed around with swapping classes in case there was something limiting about the readonly attribute.
THE PROBLEM is that whatever the first setting becomes (TRUE or FALSE) is what it stays like until the page is refreshed. I can't re-enable the checkboxes simply by running the other statement to return the opposite (FALSE or TRUE).
QUESTIONS
Is there a way to be able to toggle the RETURN (TRUE or FALSE) for the .click event?
Is there another alternative for toggling the ability to check the checkboxes?
Thanks a bunch.
jsFiddle DEMO
If you want to toggle between return false; & return true; you could use .change() event & come up with a specific condition to toggle.
$(':checkbox[readonly=readonly]').change(function () {
if($(this).is(':checked'))
console.log("return false");
else
console.log("return true");
});
OK finally figured it out. I'll try to keep my points organized.
Include jquery-ui.js, not sure why, but it needs it.
Use a .change() event to add and remove two classes that designate READ/WRITE
Use $('.ReadClass').bind('click',false); to prevent checking
Use $('.ReadClass').unbind('click', false); AND switch the classes AND add $('.WriteClass').bind('click',true); to en-enabled checking
Here is a link to my jsFiddle demo.
The demo loops through all specified form element to toggle the ability for the user to enter data.
Hope this helps somebody else.

Select all checkboxes issue(jQuery)

I have a little issue, if i select an single checkbox and press f5 the state of the checbox will remain(so it will be checked) but if i use jQuery to select all checkboxes on a page and then press f5 all of the checkboxes will blank(so uncheck, only the one's that are handpicked will remain in there state). How can i solve this, so that when i hit refresh everything will remain the same?
the code
jQuery('.sellectall').click(function(){
$('input:checkbox').attr('checked',true);
});
I assume you're using jQuery 1.6 or later.
If so, use the prop()[docs] method instead of the attr()[docs] method.
Then you should get the same behavior as if a user clicked the box.
jQuery('.sellectall').click(function(){
$('input:checkbox').prop('checked',true);
});
...or set the checked property manually:
jQuery('.sellectall').click(function(){
$('input:checkbox').each(function() { this.checked = true; });
});

Categories