javascript - 用数据库数据填写单选输入

当我查询时，表单将返回包含数据库数据的输入收音机，如图所示：

<input type="radio" id="Estado" name="Estado" value="Pendente" ' . ( ($row6["Estado"]=='Pendente') ? 'checked' : '' ) .' readonly="true"> Pendente &nbsp;&nbsp;&nbsp; <input type="radio" id="Estado" name="Estado" value="Concluído" ' . ( ($row6["Estado"]=='Concluído') ? 'checked' : '' ) .' readonly="true"> Concluído

我还展示了完整的图像：

但当我单击编辑按钮时，它会更改已填充的输入单选框，而且不应该更改，因为它不再根据数据库的数据填充，如我在图像中所示：

脚本：

$(document).on('click', '.edit_data6', function(){
           var employee_id6 = $(this).attr("Id");
           $.ajax({
                url:"./fetch26",
                method:"POST",
                data:{employee_id6:employee_id6},
                dataType:"json",
                success:function(data){

                     $('#data6').val(data.data6);
                     $('#Colaborador6').val(data.Colaborador6);
                     $('#Observacao6').val(data.Observacao6);
                     $('#Estado1').prop("checked", data.Estado);
                     $('#Conclusao').val(data.Conclusao);
                     $('#employee_id6').val(data.Id6);
                     $('#insert6').val("Gravar");
                     $('#exampleModal6').modal('show');
                }
           });
      });

      $('#insert_form6').on("submit", function(event){
           event.preventDefault();
           if($('#Colaborador6').val() == "")
           {
                alert("Colaborador é necessário");
           }
           else
           {
                $.ajax({
                     url:".conexao26",
                     method:"POST",
                     data:$('#insert_form6').serialize()
                     ,
                     beforeSend:function(){

                          $('#insert6').val("Inserting");
                     },

                     success:function(data){

                          $('#insert_form6')[0].reset();
                          $('#exampleModal6').modal('hide');
                          $('#employee_table').html(data);
                          location.reload("exampleModal6");
                     }
                });
           }
      });

HTML格式：

<form method="post" id="insert_form6">
        <div class="col-md-4 col-xs-4">
          <div class="form-group">
            <h6><label for="Data-name" class="col-form-label">Data</label></h6>
            <h6><input type="date" name="data6" id="data6" value="<?php echo date("Y-m-d");?>"></h6>
          </div>
          </div>
          <div class="col-md-4 col-xs-4">
          <div class="form-group">
            <h6><label for="Colaborador-text" class="col-form-label">Colaborador</label></h6>
            <h6><select style="width:150px" name="Colaborador6" id="Colaborador6" required>

<option></option>

<?php

$sql = "SELECT Funcionario FROM centrodb.InfoLuvas WHERE Ativo = '1' AND Funcao = 'Limpeza' AND Valencia = 'LAR'";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
  echo '<option value="'.$ln['Funcionario'].'">'.$ln['Funcionario'].'</option>';
}
?>
</select></h6>
</div>
</div>
<div class="row">
         </div>
          <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <h6><label for="Observacao-name" class="col-form-label">Tarefa Pendente</label></h6>
            <textarea type="text" id="Observacao6" name="Observacao6" class="form-control"></textarea>
          </div>
          </div>
          <div class="col-md-6 col-xs-6">
          <div class="form-group">
          <h6><label for="Observacao-name" class="col-form-label">Estado</label></h6>
          <div style="clear:both;"></div>
          <h6><input type="radio" id="Estado1" name="Estado" value="Pendente"> Pendente &nbsp;&nbsp;&nbsp; <input type="radio" id="Estado1" name="Estado" value="Concluido"> Concluído</h6>
          </div>
          </div>
          <div class="row">
         </div>
          <div class="col-md-6 col-xs-6">
            <div class="disabled form-group">
            <h6><label for="Observacao-name" class="col-form-label">Conclusão</label></h6>
            <textarea type="text" id="Conclusao" name="Conclusao" class="form-control"></textarea>
          </div>
          </div>
          <div class="col-md-2 col-xs-2">
          <div class="form-group">
          <h6><input type="hidden" name="Nome6" id="Nome6" value="Ana Ribeiro" readonly="true"></h6>
          </div>
          </div>
          <div class="col-md-2 col-xs-2">
          <div class="form-group">
          <h6><input type="hidden" name="NomeConc" id="NomeConc" value="Ana Ribeiro" readonly="true"></h6>
          </div>
          </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
        <input type="hidden" name="employee_id6" id="employee_id6" />
        <input type="submit" name="insert6" id="insert6" value="Registo" data-toggle="modal" class="btn btn-success" />
      </div>
        </form>

我在尝试这些方法，但仍然没有解决问题：
第一种形式：

var tipo_conta = $('.tipo_conta').val(data.Estado);

if(tipo_conta == 'Pendente'){

  $('#Estado1').prop('checked' , true);

}else{

  $('#Estado2').prop('checked' ,true);

}

第二种形式：

var radios = document.getElementsByName("Estado");

if (radios.value == "Pendente") {
            radios.checked = true;
        }else{
            radios.checked = true;
        }

有人能帮忙吗？

最佳答案

我在HTML文件中发现了这个问题。正如@daddygames建议的那样，您在两个单选按钮中使用了相同的ID。见下文

<h6>
    <input type="radio" id="Estado1" name="Estado" value="Pendente"> Pendente &nbsp;&nbsp;&nbsp;
    <input type="radio" id="Estado1" name="Estado" value="Concluido"> Concluído
</h6>

ID必须是唯一的。更新ID并使其唯一。然后根据需要更改.ajax脚本中的代码。这对你有帮助。