Html Radio button disable process with Javascript or

Question

Well, I've html form with several radio button like this...

    <tr class="AccountSettingtable">
            <td class="tableHeader">+ Graphics</td>
            <td class="tableHeader">Daily  <input type="radio" name="graphics" value="daily" /></td>
            <td class="tableHeader">Never  <input type="radio" name="graphics" value="never" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Logo Design</td>
            <td><input type="radio" name="logo" /></td>
            <td><input type="radio" name="logo"   /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Flyers & Postar design</td>
            <td><input type="radio" name="fly" /></td>
            <td><input type="radio" name="fly" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Print Media</td>
            <td><input type="radio" name="print" /></td>
            <td><input type="radio" name="print" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Stationery</td>
            <td><input type="radio" name="stationery" /></td>
            <td><input type="radio" name="stationery" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Packaging Design</td>
            <td><input type="radio" name="packaging" /></td>
            <td><input type="radio" name="packaging" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Illustrations</td>
            <td><input type="radio" name="illustration" /></td>
            <td><input type="radio" name="illustration" /></td>
            </tr>

In this form there are two radio button on top of the form.
1) Daily
2) Never.
So, is there any way to disable all button(which is related to never ) if user click never button(Radio button) and How do i do this?

Thanks a lot.

COMPLETE CODE..

<?php
include("include/session.php");
include("include/check.php");
include("database/db.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  
/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $_SESSION['uname'] .'s'.  " Profile"; ?></title>
<link rel="stylesheet" type="text/css" href="css/accountpage.css" />
<link rel="stylesheet" type="text/css" href="css/accountpage.css" />
<link rel="stylesheet" type="text/css" href="css/UserAccount.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />


<script type="text/javascript">
$('input#never').bind('click', function() {
 $('input.never').attr('disabled', 'disabled');
 $('input.daily').attr('disabled', '');
});
$('input#daily').bind('click', function() {
 $('input.never').attr('disabled', '');
 $('input.daily').attr('disabled', 'disabled');
});

</script>

</head>
<body>
            <div class="AccountSettingmiddle">
            <table width="631">


            <td class="tableHeader">Daily  <input id="daily" type="radio" name="graphics" value="daily" /></td>
            <td class="tableHeader">Never  <input id="never" type="radio" name="graphics" value="never" /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Logo Design</td>
            <td><input type="radio" name="logo" value="yes" class="daily"  /></td>
            <td><input type="radio" name="logo" value="no"  class="never"   /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Flyers & Postar design</td>
            <td><input type="radio" name="fly" value="yes" class="daily"  /></td>
            <td><input type="radio" name="fly" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Print Media</td>
            <td><input type="radio" name="print" value="yes" class="daily"  /></td>
            <td><input type="radio" name="print" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Stationery</td>
            <td><input type="radio" name="stationery" value="yes" class="daily"  /></td>
            <td><input type="radio" name="stationery" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Packaging Design</td>
            <td><input type="radio" name="packaging" value="yes" class="daily"   /></td>
            <td><input type="radio" name="packaging" value="no" class="never"  /></td>
            </tr>
            <tr class="AccountSettingtable">
            <td class="tableElement">Illustrations</td>
            <td><input type="radio" name="illustration" value="yes" class="daily"  /></td>
            <td><input type="radio" name="illustration" value="no" class="never" /></td>
            </tr>   

            </table>
            <script type="text/javascript">$(function() {    
$('input#never').bind('click', function() { $('input.never').attr('disabled', 
'disabled'); $('input.daily').attr('disabled', ''); }); $('input#daily').bind('click', 
function() { $('input.never').attr('disabled', ''); $('input.daily').attr('disabled', 
'disabled'); }); }); </script> 

            </div>

</body>
</html>

http://stackoverflow.com/questions/5892394/disabling-radio-button-after-click — Hulk, Apr 25 '12 at 08:20
I can see that you're arranging the radiobutton controls in a grid so that the *user* will know which one relates to which option. However, unless you add some values to each input then the *server* won't know the difference between stationery=daily and stationery=never. Something like this should work: or possibly depending on how you're going to process things on the server (if indeed you're submitting to the server - you may be handling the whole thing in JS... — Squig, Apr 25 '12 at 08:48

score 2 · Accepted Answer · answered Apr 25 '12 at 08:13

2

The easiest way would be to use jquery. You can add a class to all input related to "never" and another to all inputs related to "daily" like this:

<td><input type="radio" name="illustration" class="never" /></td>
<td><input type="radio" name="illustration" class="daily" /></td>

And then add a click handler on your 2 radio buttons :

    <script type="text/javascript">
    $('input#never').bind('click', function() {
     $('input.never').attr('disabled', 'disabled');
     $('input.daily').attr('disabled', '');
    });
    $('input#daily').bind('click', function() {
     $('input.never').attr('disabled', '');
     $('input.daily').attr('disabled', 'disabled');
    });

</script>

Of course, you need to add an id to your to radios :

Daily  <input id="never" type="radio" name="graphics" value="daily" />
Never  <input id="daily" type="radio" name="graphics" value="never" />

Another option would be to update only the radios in the same column but I find it less flexible...

answered Apr 25 '12 at 08:13

Gaet

699
3
11

You forgot a space after id="never". And did you put the javascript at the bottom of the page (or in a ready handler)? – Gaet Apr 25 '12 at 08:37
correct this but no effect.. Yes I put this javascript code within tag. – Shibbir Apr 25 '12 at 08:40
Ha then you have to put it in a ready handler like this : $(function() { the code... }); – Gaet Apr 25 '12 at 08:43
Why didn't you do that in your example @Gaet ? – mplungjan Apr 25 '12 at 08:44
The ready handler makes the code execute when the page is completely rendered. Without this, the code would get executed before the inputs are created and wouldn't be effective. – Gaet Apr 25 '12 at 08:44
@mplungian Because I didn't think about it, sorry. I usually put this kind of code at the bottom of the page and so it doesn't matter : the inputs are already rendered – Gaet Apr 25 '12 at 08:46
The script tag goes out of that. The ready handler is javascript also : – Gaet Apr 25 '12 at 08:59
or else, just put it at the bottom of your page, after your table. Then you won't need the ready handler. – Gaet Apr 25 '12 at 09:00
ok, I understand now. You have to include jquery in order to use it. you should add this to your head section : `` and you can remove the code you have already added in the head as you have also added it at the bottom. No need to have it twice. – Gaet Apr 25 '12 at 09:26
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10476/discussion-between-gaet-and-shibbir) – Gaet Apr 25 '12 at 09:32

score 0 · Answer 2 · edited Apr 25 '12 at 15:05

Yes, definitely using jQuery is better.

Here's a complete code that would be needed to do all you want!

Make a reference to the latest code of jquery in your document head with the source as:

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Add 2 functions in another script in the head itself

function disableAll() {
    $('.radio').each(function(){
        $(this).attr('disabled', 'disabled');
    });
}
function enableAll() {
    $('.radio').each(function(){
        $(this).removeAttr('disabled');
    });
}

And then in your html code:

Add a class called radio to whatever radiobuttons you want to disable/enable.
Make an onclick function to disableAll() for Never radiobutton
Make an onclick function to enableAll() for Daily radiobutton

Hope that helps!

Er. Anurag Jain · Answer 3 · 2012-04-25T09:17:00.253

First thing you have to do that please assign id attribute to every radio button.

Now with never radio button add onclick function..

Never  <input type="radio" name="graphics" id="never" value="never" onclick = "disableOther(this)"/>

Now add a javascript

If you want to disable selected radio buttons not to all

 <script type="text/javascript">
    function disableOther(ele){
       //if never radio button get  checked then 
       if(ele.checked == true){
          //Let we have to disable a radio button with  id gross then
           document.getElementById("gross").disabled = true; 
        } else{
            //Let we have to disable a radio button with  id gross then
           document.getElementById("gross").disabled = false; 
        }    
    }

 </script>

else if want to disable all radio buttons on checked never radiobutton

<script type="text/javascript">
   function disableOther(ele){
   var radios = document.getElementsByTagName('input');
     for (i = 0; i < radios.length; i++) {
       if (radios[i].type == 'radio' && radios[i].id != "never") {
          var radioid = radios[i].id;             
             if(ele.checked == true){
                  document.getElementById(radioid).disabled = true;
            }else{
                document.getElementById(radioid).disabled = false;
            }                 
         }
       }
   }
</script>

Here If want to disable all radio button then modify the code in js `var radios = document.getElementsByTagName('input'); for (i = 0; i < radios.length; i++) { if (radios[i].type == 'radio' && radios[i].id != "never") { var radioid = radios[i].id; if(ele.checked == true){ document.getElementById(radioid).disabled = true; }else{ document.getElementById(radioid).disabled = false; } } } ` — Er. Anurag Jain, Apr 25 '12 at 09:18

Html Radio button disable process with Javascript or

3 Answers3