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>

Prashant Pimpale · Accepted Answer · 2018-12-20 06:24:54Z

1

$('#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"))

edited Dec 20, 2018 at 6:24

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Dec 20, 2018 at 6:17

Dipti

5654 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juan J · Accepted Answer · 2018-12-20 06:33:54Z

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

Thanks for your solution, mate. I'll keep this for future reference.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related