toggle input field editable

I would like to make form fields editable only after clicking a button, without Javascript. In the first state (readonly) I wanted to make the frame invisible and set the pointer events to "none". The button is supposed to be a checkbox, but there is no effect on the input fields, unlike the test frame below.

label.toggle {color:white; background: darkred;padding: 0.1rem .3rem;border-radius: 0.5rem;}
.visually-hidden {position: absolute;left: -100vw;}

.toggle_edit {color:black;   border:1px solid #FFFFFF;}
#toggle:checked ~ .toggle_edit {color:darkred; border:1px solid #000000;}
                  input.toggle_edit {color:black; border:1px solid #FFFFFF;}
#toggle:checked ~ input.toggle_edit {color:darkred;  border:1px solid #000000; pointer-events: none;}

<div> <!-- toggle -->
  <label class="toggle" for="toggle">bearbeiten</label><input type="checkbox" id="toggle" class="visually-hidden">
  <table>
    <form action="functions/edit.php" method="post" target="editframe"> 
      <tr>
        <th>Name</th>
        <td><input type="text" class="toggle_edit" name="justus" value="Justus" size="30" maxlength="50" ></td>
      </tr> 
      <input type="Submit" name="absenden" value="absenden"></form>
  </table>
  <div class="toggle_edit">Testframe</div> 
</div> <!-- toggle -->