How to disable input fields on page load if a checkbox is not checked?

Question

I want to disable all the user input fields in a form, if the 'Status Active' checkbox is unchecked. The target is to load the page with all the details but if the Status is not active then the checkbox will show as unchecked and the rest of the input fields will remain disabled, till the user checks the checkbox. He can then edit the data and save it.

However, if the record is active, then all the fields will be enabled for editing straight away.

I have already achieved this, but the only problem is even when the record is active, the input fields are getting disabled. Can anyone please point out where is the error in my code?

<script type='text/javascript'>
	$(function(){
		if($('#square').not(':checked')){
			 $('#prizename, #prizedesc, #comment').attr('disabled','disabled');
		}
	});
  
  
  
  function checkDisable(){
		var square = document.getElementById('square');
		var prizename = document.getElementById('prizename');		
		var prizedesc = document.getElementById('prizedesc');
		var comment = document.getElementById('comment');  	
		
		if(square.checked){
			prizename.disabled = false;			
			prizedesc.disabled = false;
			comment.disabled = false;		
		}

		if(!square.checked ){
			prizename.disabled = true;			
			prizedesc.disabled = true;
			comment.disabled = true;
		}
	}
</script>

<php codes here>
  <div>
			<table>
				<tr>
					<td>Prize Status - Active:</td>
					<td><div class="square">
						<input type="checkbox" name="status" id="square" value="1" onchange="checkDisable()" <?php if ($status == 1) echo 'checked'; ?> />
					  </div>
					</td>
				</tr>
			</table>
			 <label>Prize Name <input type="text" name="prizename" id="prizename" value="<?php  echo isset($_POST['prize']) ? $prizename : '' ?>" > </label>
			 <label>Prize Description <input type="text" name="prizedesc" id="prizedesc" value="<?php  echo isset($_POST['prize']) ? $prize_description : '' ?>" > </label>
			 <label>Comment <textarea name="comment" id="comment" rows="4" ><?php echo $comment ?> </textarea>  </label>		 	
			 
		</div>

			<div class="button-section">	
				<input id="save_button" type="submit" name="submit" value="Save"> 
			</div>

Answer 1

I have altered your code - Working from my side.

HTML: (Just insert your variables again)

<table>
    <tr>
        <td>Prize Status - Active:</td>
        <td>
            <div class="square">
                <input type="checkbox" name="status" id="square" value="1">
            </div>
        </td>
    </tr>
</table>

<label>Prize Name <br><br><input type="text" name="prizename" id="prizename" 
value="Juan" ></label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc" 
value="Description" ></label>
<label>Comment <textarea name="comment" id="comment" rows="4" 
>Comment</textarea></label>


<div class="button-section">    
<input id="save_button" type="submit" name="submit" value="Save"> 
</div>

JS: (The first bit executes on page load and the second part is listening for the change event on the checkbox)

if($('#square').not(':checked').length > 0){

    document.getElementById('prizename').disabled = true;
    document.getElementById('prizedesc').disabled = true;
    document.getElementById('comment').disabled = true;

} else {

    document.getElementById('prizename').disabled = false;
    document.getElementById('prizedesc').disabled = false;
    document.getElementById('comment').disabled = false;

}

const checkbox = document.getElementById('square');

checkbox.addEventListener('change', (event) => {
        if (event.target.checked) {
            document.getElementById('prizename').disabled = false;
            document.getElementById('prizedesc').disabled = false;
            document.getElementById('comment').disabled = false;
} else {
            document.getElementById('prizename').disabled = true;
            document.getElementById('prizedesc').disabled = true;
            document.getElementById('comment').disabled = true;
    }
})

Answer 2

$('#square').not(':checked')

this condition is not satisfied because it will return the object. You have to check with length. Please check in your code.

if($('#square').not(':checked').length > 0)

Or

if(!$('#square').is(":checked"))