使用 JS 或 JQUERY 将单选按钮转换为只读(未禁用)

Posted

技术标签:

【中文标题】使用 JS 或 JQUERY 将单选按钮转换为只读(未禁用)【英文标题】:Convert radio button to reade-only (not disable) with JS or JQ 【发布时间】:2021-06-28 07:02:41 【问题描述】:

我有一个参数,其中包含三个输入选项作为单选按钮(例如“是”;“否”;“NA”)。我想在不更改原始 html 代码的情况下使用 JS 或 Jquery 将其中一个单选按钮(例如,用于 NA)设为只读(不禁用)。谁能帮帮我?

<fieldset class="form-group radio_buttons optional question_1">
  <div class="form-check">
    <input id="question_1_1" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_1">Yes</label>
  </div>
  <div class="form-check">
    <input id="question_1_2" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_2">No</label>
  </div>
  <div class="form-check">
    <input id="question_1_3" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_3">NA</label>
  </div>
</fieldset>

【问题讨论】:

详细解释请参考***.com/questions/1953017/… 谢谢。我已经测试过“onclick="this.checked = false" 但对我不起作用。禁用不是我的任务的选项。 什么是只读按钮?这是一个悖论 只读,我的意思是单选按钮(NA)显示但不可点击。它也不应该被禁用,因为它的值需要记录在数据库中。 因此,无论选择什么,都应该显示三个按钮。我想要做的是防止未点击事件。也就是说,用户可以看到三个选项,但只能选择是或否。NA 不应该是可点击的。 【参考方案1】:

<html>
  <body>
  <fieldset class="form-group radio_buttons optional question_1">
  <div class="form-check">
    <input id="question_1_1" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_1">Yes</label>
  </div>
  <div class="form-check">
    <input id="question_1_2" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_2">No</label>
  </div>
  <div class="form-check">
    <input id="question_1_3" class="form-check-input"  onmouseover="setValue(this)" onclick="retainValue(this)" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_3">NA</label>
  </div>
</fieldset>
   
    <script>
      var checkboxes = ;
      function setValue(el) 
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
      
      function retainValue(el) 
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
        el.checked = checkboxes[el.id];
      
    </script>
  </body>
</html>

【讨论】:

非常感谢您的回答。还有一个问题:可以用 JS 或 JQ 传递 (onmouseover="setValue(this)" onclick="retainValue(this)") 。例如: $("question_1_3").CSS(onmouseover="setValue(this)" onclick="retainValue(this)") 这不起作用!我正在尝试这样做,因为我不允许编辑 html 代码;所以我必须通过 JS 传递属性。有什么想法吗? 或通过类似的方式:$j('#question_1_3').trigger('mouseenter');【参考方案2】:

这应该根据您的要求工作

$(document).ready(function()
  $('#question_1_3').on("click", function()
    $(this).prop("checked", false);
  );
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html>
  <body>
  <fieldset class="form-group radio_buttons optional question_1">
  <div class="form-check">
    <input id="question_1_1" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_1">Yes</label>
  </div>
  <div class="form-check">
    <input id="question_1_2" class="form-check-input" type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_2">No</label>
  </div>
  <div class="form-check">
    <input id="question_1_3" class="form-check-input"   type="radio" value="1" name="question_1">
    <label class="form-check-label" for "question_1_3">NA</label>
  </div>
</fieldset>
  </body>
</html>

【讨论】:

以上是关于使用 JS 或 JQUERY 将单选按钮转换为只读(未禁用)的主要内容,如果未能解决你的问题,请参考以下文章

如何使单选按钮只读但不禁用?

如何通过jquery将单选按钮的值与类合并

如何将单选按钮创建为按钮?

当内容包含在流布局中时,如何将单选按钮或复选框及其标签保持在一起

如何将单选按钮添加到菜单项?

将单选组分配给单选按钮