Question

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

Answer 1

请尝试此操作。使用单选按钮更换

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

＆＃13;

function Screen_Units(){
  //your rest of the code
  document.getElementById("first").checked = true;
}

＆＃13;

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

＆＃13;

Answer 3

如果您想使用完整的无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/

Answer 4

试一试：

使用纯javascript：

＆＃13;

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

＆＃13;

Answer 5

如何隐藏另一个？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

正如@boldewyn在评论中提到的那样＃34;使用onchange而不是onclick＆＃34;解决了我的问题。

:root {
  --progress-width: 75vw;
}
body {
  background-color: #000;
}
h1 {
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-weight: normal;
  margin: 50px 0 0;
  color: #fff;
}
.progress {
  position: relative;
  border: 0;
  width: var(--progress-width, 500px);
  height: 40px;
  line-height: 40px;
  margin: 100px auto;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  background-color: #07A4DD;
  border-radius: 40px;
  overflow: hidden;
}
.progress .progress-text {
  position: absolute;
  top: 0;
  width: var(--progress-width, 500px);
  text-align: center;
  color: #fff;
  font-variant: small-caps;
}
.progress .progress-bar {
  height: 100%;
  overflow: hidden;
  width: 54%;
  background-color: #fff;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  -webkit-animation: animate 4s;
  animation: animate 4s;
}
.progress .progress-bar .progress-text {
  color: #07A4DD;
}
@-webkit-keyframes animate {
  0% {
    width: 0%;
  }
}
@keyframes animate {
  0% {
    width: 0%;
  }
}

感谢所有

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

6 个答案: