dry9192
2018-10-08 12:05
浏览 111
已采纳

如果选中单选按钮,则更改字段的只读状态,不进行jquery

I have a form, I want to initially have some normal fields and some readonly fields. Then a radio button with two options, if it's the default option nothing changes, if they select the second then the readonly fields become editable.

I need to do this without jquery.

Here's the form

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

Please assist

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongxie3681 2018-10-08 12:33
    已采纳

    First, add the IDs in your HTML.

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

    Then, get the elements with getElementById, and add EventListeners in your JS.

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

    CodePen: https://codepen.io/anon/pen/vVyVGx

    评论
    解决 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题