3

I have simple checkboxes in a table. This is the checkbox tag as I see it in code:

<input type="checkbox" id="iFact123" onchange="submit_status_change(123,$(this).prop('checked'));" >

Now for example in Firefox, this works fine. In Chrome, following happens:

  • when checkbox clicked, the checkbox does not appear to change to checked/unchecked. it stays the same. at least visually
  • the submit_status_change() runs ok and if I reload the page, the element is loaded as checked (which is now info from database). since this function takes info from $(this).attr('checked')), the element must be checked at least at the time the parameter is send - it just doesn't appear to.

Now anyone has any idea, or experience with such a problem?

If you think it has anything to do with the submit function, here it is:

function submit_status_change(id, val){
  //$.post('something.php',{'change_status':id, 'status':val}, function(){}); 
}

UPDATE: attr changed to prop

Chrome now changes the checkbox, at least visually. The onchange event doesn't seem to happen.

Firefox:

    TypeError: $(...).prop is not a function
[Break On This Error]   

submit_tech_status(123,$(this).prop('checked'));

UPDATE2: I cut off some code. Now the submit function is pretty much clear. Firefox has an error with prop, chrome prints no error, but doesn't run the submit function. Which is different from before, where the checkbox in chrome appeared not to get checked or unchecked, but the function went ok.

Oriesok Vlassky
  • 797
  • 1
  • 13
  • 26
  • Use `.prop('checked')` instead `.attr('checked')`, or `.is(':checked')`. – Rob W Mar 04 '13 at 09:17
  • why? `.attr('checked')` may prevent the actual change? – Oriesok Vlassky Mar 04 '13 at 09:24
  • `.attr` shows value of the attribute, and `.prop` reflects the property. Read the answers at http://stackoverflow.com/questions/5874652/prop-vs-attr – Rob W Mar 04 '13 at 09:25
  • well I tried, anyway the problem stays the same. chrome does not visually change anything. – Oriesok Vlassky Mar 11 '13 at 09:59
  • Because your selector is wrong as well. Prefix the sharp sign, `$('iFact'+id)` -> `$('#iFact'+id)` – Rob W Mar 11 '13 at 10:00
  • ok I updated. anyway - I still have this issue: in firefox, I can check/uncheck the checkbox.. in Chrome, it does not change. The submit function, however runs fine on the background. – Oriesok Vlassky Mar 11 '13 at 10:05
  • Don't forget to use `.prop` in the inline event handler as well. – Rob W Mar 11 '13 at 10:07
  • oook, now I have different problem! the checkbox looks like it has been checked, anyway the onchange event seems not to happen. I added console.log at the beginning of the `submit` function and it obviously doesn't run. – Oriesok Vlassky Mar 11 '13 at 10:16
  • oh and firefox prints error – Oriesok Vlassky Mar 11 '13 at 10:17
  • Remove your code and put the check-state-check in the button's click handler (or the form submit's handler). Currently, you're just adding new events whenever the checkedness changes (old events are not removed, use `.off('click').click(function(){ ... })` if you want that. EDIT: What jQuery version are you using? – Rob W Mar 11 '13 at 10:21
  • I added the `.off('click')`, but firefox still prints me error on the first `.prop`, while chrome still doesn't run the `submit function` .. without printing an error – Oriesok Vlassky Mar 11 '13 at 10:27
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25947/discussion-between-oriesok-vlassky-and-rob-w) – Oriesok Vlassky Mar 11 '13 at 10:53

1 Answers1

0

just write something like:

$("#iFact123").change( function() {
   var c = $(this).prop("checked");
   // do whatever you want with c value
});
gididaf
  • 175
  • 4
  • 12