0

The requirment is that if Reset button is clicked,

  1. All radio buttons have to be enabled.
  2. The Daily radio button has to be checked.

These codes works well on IE, Chrome, and Safari. But not work on Firefox!

In firefox,[document.getElementById('day').click(); on JAVASCRIPT 7th line.] won't work well by the following steps.

  1. Click disable button (to disable all radio buttons.)
  2. Click reset (to enable all radio buttons and daily radio button is checked.)

Here the Daily radio button is not checked on Firefox.

(There are some other procedures if the radio buttons are changed.So I need to trigger onclick event of the Daily radio button)

HTML

    <input type="radio" name="sumType" value="1" id="day"  tabindex="1">Daily
    <input type="radio" name="sumType" value="2" id="month" tabindex="2" checked>Monthly
    <input type="button" value="Disable" onclick="disableRadio()" id="rd1"/>
    <input type="button" value="Reset" onclick="init()" id="rd2"/>

Javascript

     function disableRadio(){
       $("input[type=radio]").attr('disabled','disabled');
     }

     function init(){
       $("input[type=radio]").removeAttr("disabled");
       document.getElementById('day').click();
     }

DEMO >> https://jsfiddle.net/znjjjd6e/10/

hmmh
  • 57
  • 2
  • 10

4 Answers4

1

If you just need to check the day radio,

$('#day')[0].click();

Fiddle

or 

document.getElementById('day').checked = true;

document.getElementById('day').click() won't trigger the actual mouse click event of the radio, it triggers the onclick handler - Refer.

Also, usage of prop() is better as suggested by Rayon

Community
  • 1
  • 1
Shaunak D
  • 20,588
  • 10
  • 46
  • 79
  • Thank you @Shaunak D. `document.getElementById('day').click()` works on chrome and IE. but not in Firefox.(the diagnosis is when from disabled state to enable state and then call onclick handler) Is that a bug? Because If the radio is in enable state , the onclick handler calling is worked. – hmmh May 30 '16 at 06:46
0

To checked any radio button simply do:

DEMO: https://jsfiddle.net/hj5qw8w0/

function init(){
  $("input[type=radio]").removeAttr("disabled");
  el = window.document.getElementById('day'); // add this lines
  el.checked = true; // add this lines - it will checked the day radio button
}
Dhara Parmar
  • 8,021
  • 1
  • 16
  • 27
  • Thank you for your rapid reply and for your time bro @Dhara Parmar. I also need to trigger the onclick event in which there are other procedures existed. `e1.checked = true;` doesn't trigger the click event, is that right? – hmmh May 30 '16 at 06:38
0

You need to replace the javascript statement:-

document.getElementById('day').click();

with

document.getElementById('day').checked=true;

and the code will work in Firefox also

Webdev
  • 617
  • 6
  • 24
  • 1
    Thank you @Bhawana. I just need to run onClick handler of that radio button. Because there are some other procedures in that handler have to run. – hmmh May 30 '16 at 06:49
0

Firefox wont support click().You can check SO question

So this document.getElementById('day').click(); will not work

Since you are using jquery you can use either of this

function init(){
  $("input[type=radio]").removeAttr("disabled");
    //$('#day').trigger('click'); // either use this
  $('#day').attr('checked',true); // or you can also use this
}

check for Demo

Community
  • 1
  • 1
brk
  • 48,835
  • 10
  • 56
  • 78
  • `document.getElementById('day').click();` works if you just click the reset button on the first time(i.e all radio buttons are enabled state). The Daily radio button will be checked. – hmmh May 30 '16 at 06:55