как сделать текстовое поле доступным только для чтения при выборе значения из выпадающего списка 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"/>