javascript - 用数据库数据填充 radio 输入

Question

当我查询表单返回的input radio填充了数据库的数据，如图:

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

有人能帮忙吗？

Answer 1

我在 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 脚本中的代码。这会帮助你。