How do I disable an input when checkbox is clicked in PHP?

Question

I want to disable an input when the anonymous check box is clicked. A PHP method is preferred. I was looking for it to disable the input right away. If Javascript is needed I'm fine with it too.

My attempt:

<form action="#form" method="post" id="form">
                  <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" name="name" id="dis">
                  </div>
                  <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                  </div>
                  <div class="checkbox">
                    <label><input type="checkbox" name="check">Anonymous</label>
                  </div>
                  <div class="form-group">
                    <label for="txta">Your Idea</label>
                    <textarea class="form-control" id="txta" rows="3" name="bright" required></textarea>
                  </div>
                  <button type="submit" class="btn btn-default final" style="border-radius:5px;" name="submit">Submit</button>
              </form>

Answer 1

PHP should be used to help construct the DOM, but I do not recommend using PHP to try and manipulate the DOM. Once a DOM has been constructed and is rendered by the browser, it falls into the domain of the client. PHP is a server-side language, whereas JavaScript is a client-side language and for that reason, I believe the better approach would be to use JavaScript.

I would recommend you use jQuery (a JavaScript library) to accomplish this task.

Begin by adding an ID to your checkbox:

<input type="checkbox" name="check" id="anonCheck">

Then, we can listen for a click event on that particular element (your checkbox). Depending on the state of that checkbox, we can either enable or disable your input box.

$('#anonCheck').on('click', function(){

    if ( $('#anonCheck').is(':checked') ) {

        $("#name").prop('disabled', true);

    } else {

        $("#name").prop('disabled', false);

    }

}

Answer 2

It looks like you tried to mix jquery (javascript) which is client-side only with php (server-side only). This will not work. You first must understand the difference between these two layers.

When your webserver (including php) has finished providing the webpage, their job is done. You can no-longer interact with PHP unless you do what's commonly known as an ajax request (see: $.post, $.get, $.ajax) which allows you to contact your script and send/pull data back. You have to use javascript to achieve what you want changed on the front-end once it's delivered to the browser.

jQuery is a great library to start with considering it saves a lot of time by removing the guess-work however, if you do not know basic syntactic structure of any programming language - you will spend the next 2-3 years banging your head on a desk like I did 10 years ago. I highly suggest watching tutorials on youtube or reading as much as you can.

With that being said, you don't need php to disable a checkbox when it's clicked using jquery. You can just place this in your html and it should work.

<script>
    $(document).on('change', 'input[name="check"]', function() {
        $(this).attr('disabled', true).prop('disabled', true); //used .attr for browser compatibility.
    });
</script>

I should also note that there is a distinct difference from raw javascript and jQuery. I suggest learning javascript first so that you can efficiently learn any of the js libraries that suite your needs. jQuery is not the only one but it has a huge community for support.

If you don't know where to start, begin by asking google: "What is a javascript selector", "What is a javascript event handler", "How modify html elements on an event javascript". This will set you on the right path and get ready, you're going to test the limits of your search keywords. A big part of this is also learning the terms (like math) to find the right answer.

• Last note: jQuery will not work unless you include it. Here is an example using what I showed you above.

  <html>
  <head>
      <title>My Website</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript></script>
      <style>h1 { border-bottom:2px solid #CCC; }
      <script>
          $(document).on('change', 'input[name="check"]', function() {
              $(this).attr('disabled', true).prop('disabled', true); //used .attr for browser compatibility.
          });
      </script>
  
  </head>
  <body>
      <h1>Hello world!</h1>
      <div>
          <form>
              <label for="fullname">Full Name:</label>
              <input type="text" name="fullname" value="John Doe"/>
              <br>
              <label for="checkbox">Click Me:</label>
              <input type="checkbox" name="cbox"/>
          </form>
      </div>
  </body>
  

Answer 3

PHP is a backend language, therefore, you cannot control the UI elements as the user interacts, the PHP script runs in the background at load time - or at request, if you are using AJAX methods.

So, the best method you have would be to go with Javascript. Javascript is a frontend (as well as a backend) which allows for you to respond to user's actions at their end. It's event-based for a lot of functions, and it works extremely well for that type of work.

Let's get started, shall we? Start by adding an id value to the checkbox, and then you can use it for your application.

function disableName() {
  document.getElementById("name").disabled = document.getElementById("anon").checked;
}

<div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name" name="name">
</div>

<div class="checkbox">
    <label><input type="checkbox" name="check" id="anon" onclick="disableName()">Anonymous</label>
</div>

That code will get the anon checkbox, and the name textfield then disable the name if the anon is checked.

This is Javascript Vanilla; no external libraries that you need to look at.