javascript - How to make an active radio button unclickable - Stack Overflow

admin管理员组

文章数量:1336380

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>

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>

• javascript
• html

Share Improve this question Follow edited Jul 5, 2016 at 12:48 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jul 5, 2016 at 12:43 AhmadrezaAhmadreza 4111 silver badge66 bronze badges 5

• add disabled ? like <input checked disabled name=unit onclick=Src... – Timothy Commented Jul 5, 2016 at 12:45
• Disabled input is not sent to the server – mplungjan Commented Jul 5, 2016 at 12:47
• Have you tried using onchange instead of onclick? The change event is usually only fired when a radio button bees checked, not when it bees unchecked. – Boldewyn Commented Jul 5, 2016 at 12:49
• i don't want to deactivate any of my options before selecting. because my page is a JS calculator and every click on options make a change is calculation and units. in other hand i want to disable each option after select. – Ahmadreza Commented Jul 5, 2016 at 12:53
• "Disabled" can work if you are not in <form></form> but in a JS where your get values of inputs. – Yvan Commented Jul 5, 2016 at 12:55

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Please try this .Replace with your radio buttons

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

});

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

If you want to use a plete 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/he31ob0t/

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>

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>

as @boldewyn mentioned in ments "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

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./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>

onclick="this.checked=false;" 

will make it unclickable.

本文标签： javascriptHow to make an active radio button unclickableStack Overflow