如果未选中复选框，如何在页面加载时禁用输入字段？

Question

如果未选中“状态活动”复选框，我想禁用表单中的所有用户输入字段。目标是加载包含所有详细信息的页面，但如果状态未激活，则复选框将显示为未选中，其余输入字段将保持禁用状态，直到用户选中复选框。然后他可以编辑数据并保存。

但是，如果记录处于活动状态，则所有字段都将立即启用编辑。

我已经实现了这一点，但唯一的问题是即使记录处于活动状态，输入字段也会被禁用。谁能指出我的代码中的错误在哪里？

<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

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

这个条件不满足，因为它会返回对象。你必须检查长度。请检查您的代码。

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

或者

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

Answer 2

我已经更改了您的代码 - 在我身边工作。

HTML：（只需再次插入变量）

<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：（第一部分在页面加载时执行，第二部分在复选框上监听更改事件）

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