CODEWITHSUNDEEP
javascriptjqueryhtmlfirefoxradio-button
hmmh
hmmh

Reputation: 57

(Firefox) radio onclick event does not work after that radio button is enabled(from disabled state)

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/

Upvotes: 0

Views: 877

Answers (4)

brk
brk

Reputation: 50291

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

Upvotes: 0

Webdev
Webdev

Reputation: 647

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

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

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

Upvotes: 1

Dhara Parmar
Dhara Parmar

Reputation: 8101

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
}

Upvotes: 0

Related Questions