如何使活动单选按钮不可点击

How to make an active radio button unclickable

本文关键字：单选按钮 何使 活动      更新时间：2023-09-26

在Javascript/html基页中有一个带有两个选项的单选输入表单。我怎样才能使不可点击的选项是激活或激活后?

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

请尝试一下，用你的单选按钮代替

$(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">

如果你想使用完全不使用javascript的选项，你可以只使用CSS3:

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;
}

这将阻止在活动无线电上的点击。

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

试试这个:

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>

把另一个藏起来怎么样?

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>

正如@boldewyn在评论中提到的"使用onchange代替onclick"解决了我的问题。

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

谢谢所有的

试一试:

与纯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>

onclick="this.checked=false;"

将使其不可点击

相关文章：