从下拉列表html中选择值后如何使文本字段变为只读

Question

我想根据从下拉列表中的用户选择使文本字段为只读

这是我的代码

<select id="Personal_Religion_Sect" name="Personal_Religion_Sect">
    <option value="Un-Married"></option>
    <option value="Married"></option>

<select>

当用户从数据列表中选择Un-Married ，我想将输入设为readonly

<label for = "cc-payment" class = "control-label mb-1">Spouse Name</label> <input type = "text" autocomplete="off" class = "form-control"  name="Medical_Category" id = "Medical_Category"   style = "color:  black;" value="<?php echo $data['Personal_Medical_Category'];?>" required placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable"/>

如果用户从数据列表中选择Married ，那么我要将输入设置为readonly=false

我将如何实现？

提前致谢

Answer 1

您无法通过PHP实现此功能，您需要使用JavaScript进行此操作。

下面的代码片段将包含jQuery，然后将侦听器添加到您的选择中-更改后将在其中检查新值，如果该值等于Married ，则会删除required属性，并添加readonly属性。 当选择与“ Married不同的值时，这些值将反转。

 $("#Personal_Religion_Sect").on("change", function() { var input = $("#Medical_Category"); var readonly = !(this.value === "Married"); input.prop("readonly", readonly); input.prop("required", !readonly); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="Personal_Religion_Sect" name="Personal_Religion_Sect"> <option value="" disabled selected>Select one --</option> <option value="Un-Married">Un-Married</option> <option value="Married">Married</option> <select> <label for="cc-payment" class="control-label mb-1">Spouse Name</label> <input type="text" autocomplete="off" class="form-control" name="Medical_Category" id="Medical_Category" style="color: black;" value="<?php echo $data['Personal_Medical_Category'];?>" required placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable"/>