CODEWITHSUNDEEP
javascripthtml
Ahmadreza
Ahmadreza

Reputation: 41

How to make an active radio button unclickable

There is a radio input form with two options in a Javascript / html base page. How i can make un-clickable the option which is active or after activation?

<div class="unit_1">
  <label><input checked name=unit onclick=Screen_Units(); type=radio value=SI>SI</label>
</div>
<div class="unit_2">
  <label><input name=unit onclick=Screen_Units() type=radio value=Engl>Imperia</label>
</div>

Upvotes: 3

Views: 9002

Answers (7)

Mohammed Hasan
Mohammed Hasan

Reputation: 1

onclick="this.checked=false;"

will make it unclickable.

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

Try it :

With Pure javascript :

<html>
    <head>
    </head>
    <body>
        <div class="unit_1">
            <label><input checked  name="unit" onclick="Screen_Units(this)" type="radio" value="SI">SI</label>
        </div>
        <div class="unit_2">
          <label><input name="unit"  onclick="Screen_Units(this)" type="radio" value="Engl">Imperia</label>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            var ele = document.getElementsByName("unit");
           function Screen_Units(t){
               for(var i=0; i<ele.length; i++) {
                   if(ele[i]!=t){
                       var x = ele[i];
                       while(x.parentNode.tagName != "DIV")
                           x = x.parentNode;
                           x.style.display = "none";     
                   }                      
               }
           }
        </script>
     </body>
</html>

Upvotes: 0

Ahmadreza
Ahmadreza

Reputation: 41

as @boldewyn mentioned in comments "using onchange instead of onclick" solved my problem.

<div class="unit_1">
<label><input checked name=unit onchange=Screen_Units(); type=radio value=SI>SI</label>
</div>
<div class="unit_2">
<label><input name=unit onchange=Screen_Units() type=radio value=Engl>Imperia</label>
</div>

thanks all

Upvotes: 0

Sree KS
Sree KS

Reputation: 1353

Please try this .Replace with your radio buttons

$(document).ready(function() {
  $(".check").click(function() {
    $(".check").attr("disabled", true);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" class="check" name="gender">
<input type="radio" class="check" name="gender">

Upvotes: 2

mplungjan
mplungjan

Reputation: 177692

How about hiding the other?

function Screen_Units(but) {
  var buts = document.getElementsByName(but.name);
  var val = but.value;
  var div = (val == buts[0].value) ? upTo(buts[1],"div") :  upTo(buts[0],"div");
  div.style.display="none";
}

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}
<div class="unit_1">
  <label><input checked name="unit" onclick="Screen_Units(this);" type=radio value="SI">SI</label>
</div>
<div class="unit_2">
  <label><input name="unit" onclick="Screen_Units(this)" type="radio" value="Engl">Imperia</label>
</div>

Upvotes: 0

Michael
Michael

Reputation: 433

If you want to use a complete javascript-free option you can go with CSS3 only:

input[type=radio]:checked {
  position: relative;
  pointer-events: none;
}

input[type=radio]:checked:before {
  content:" ";
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:10;
}

This will prevent the clicks on the active radio.

JSFiddle: https://jsfiddle.net/he31ob0t/

Upvotes: 1

hityagi
hityagi

Reputation: 5256

Try this : 

function Screen_Units(){
  //your rest of the code
  document.getElementById("first").checked = true;
}
<div class="unit_1"><label><input id="first" checked readonly name=unit onclick="Screen_Units();" type=radio value=SI>SI</label></div>
<div class="unit_2"><label><input name=unit onclick=Screen_Units() type=radio value=Engl>Imperia</label></div>

Upvotes: 0

Related Questions