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

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

2 个答案: