Question

我有一个表单，我希望最初具有一些普通字段和一些只读字段。然后是带有两个选项的单选按钮，如果它是默认选项，则什么都不会改变，如果他们选择第二个，则只读字段变为可编辑的。

我需要在没有jquery的情况下执行此操作。

这是表格

<form name="newstock" action="newstock-save.php" method="post">

<input type="radio" name="individual" value="1" checked> Fruit<br>
<input type="radio" name="individual" value="0"> Veges<br><br>

<table>
<tr>
    <td>Item name</td>
    <td><input type="text" name="item_name"></td>
</tr>
<tr>
    <td>Packing</td>
    <td><input type="text" name="packing_name" readonly></td>
</tr>
<tr>
    <td>Unit</td>
    <td><input type="text" name="packing_unit" readonly></td>
</tr>
</table>

请协助

Answer 1

首先，在您的HTML中添加ID。

<form name="newstock" action="newstock-save.php" method="post">

<input type="radio" name="individual" value="1" id="individual1" checked> Fruit<br>
<input type="radio" name="individual" value="0" id="individual0"> Veges<br><br>

<table>
<tr>
    <td>Item name</td>
    <td><input type="text" name="item_name"></td>
</tr>
<tr>
    <td>Packing</td>
    <td><input type="text" name="packing_name" id="packing_name" readonly></td>
</tr>
<tr>
    <td>Unit</td>
    <td><input type="text" name="packing_unit" id="package_unit" readonly></td>
</tr>
</table>

然后，使用 getElementById 获取元素，并在JS中添加 EventListeners 。

const individual1  = document.getElementById("individual1"),
      individual0  = document.getElementById("individual0"),
      packing_name = document.getElementById("packing_name"),
      package_unit = document.getElementById("package_unit");

individual1.addEventListener("change", function(){
  packing_name.value = '';
  package_unit.value = '';
  packing_name.readOnly = true;
  package_unit.readOnly = true;
});

individual0.addEventListener("change", function(){
  packing_name.readOnly = false;
  package_unit.readOnly = false;
});

代码笔： https://codepen.io/anon/pen/vVyVGx

Answer 2

您可以使用以下两个选项删除元素的只读内容，

选项1：

document.getElementById('elementId').removeAttribute('readonly');

选项2：

document.getElementById('elementId').readOnly = false;

在更改单选按钮时使用以上任何代码。

要触发点击事件，请使用属性 onclick ，将以下内容添加为输入元素的属性。

onclick="callBack()"

在您的JS中，

function callBack() {
  document.querySelector('input[name="individual"]:checked').value; // get the value and check it with an if condition.
}

Answer 3

使用document.querySelector根据您可以在JavaScript中动态禁用或启用任何I / p字段的值来获取选定的单选值

获取电台价值

document.getElementById(“input[id=‘eleid’]:checked”).value

启用/禁用

document.getElementById(elem).disabled = true/false

如果选择了单选按钮，则更改字段的只读状态，无jQuery

3 个答案: