javascript - RemoveAttr 和 addattr 与 ajax 响应第一次工作，之后

Question

当点击带有 .editaRunses 类的 span 时，触发对 php 文件的 ajax 调用，php 文件返回 json whit 数据，代码尝试将值放入每个输入中，除复选框外一切正常，第一个时间得到正确的值(我测试了每一行并看到数据是正确的)所以问题可能在 removeAttr 中，代码运行一次很好，在此之前没有。

$(document.body).on('click', '.editaRunses' ,function(){
            var id = $(this).data('id');
            $.ajax({
                type: "POST",
                url: "acciones.php?accion=recuperaRunses",
                data: {recuperaFormulario : id},
                dataType : 'json',
                success: function(response) {
                     $('#modificaRunses form').find('input').eq(0).val(response.Rope);
                     $('#modificaRunses form').find('input').eq(1).val(response.URL);
                     $('#modificaRunses form').find('textarea').eq(0).val(response.Proceso);
                     $('#modificaRunses form').find('textarea').eq(1).val(response.Observaciones);
                     $('#modificaRunses form').find('input').eq(2).val(response.Hora);
                     var cont  = 3;
                     $.each(response.Dias,function(ind,elem){
                            var sele = $('#modificaRunses form').find('input').eq(cont);
                            if (elem === "si"){ 
                                $(sele).attr('checked', 'checked');
                            }
                            else{
                                $(sele).removeAttr('checked', 'checked');
                            }
                            cont++;
                     });
                }
            });
        });

HTML代码:

<div class="modal fade" id="modificaRunses" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Crea Departamento</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form" action="" method="post">
                            <h3 class="text-center">Añade registro a la Runshet</h3>
                            <div class="form-group">
                                <label>Rope</label>
                                <input type="text" class="form-control" name="rope"></input>
                            </div>
                            <div class="form-group">
                                <label>URL Rope</label>
                                <input type="text" class="form-control" name="url"></input>
                            </div>
                            <div class="form-group">
                                <label>Proceso</label>
                                <textarea class="form-control" name="proceso"></textarea>
                            </div>
                            <div class="form-group">
                                <label>Observaciones</label>
                                <textarea class="form-control" name="observaciones"></textarea>
                            </div>
                            <div class="form-group">
                                <label>Hora (pon la hora con el formato 13:13)</label>
                                <input type="text" class="form-control" name="hora"></input>
                            </div>
                            <div class="form-group">
                                <label>Runshet donde ira (puedes seleccionar más de una)</label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Lunes" name="edicion[]" >Lunes - Jueves
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Viernes" name="edicion[]">Viernes
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Sabado" name="edicion[]">Sábado 
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Domingo" name="edicion[]">Domingo
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Local" name="edicion[]">Festivo Local
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Nacional" name="edicion[]">Festivo Nacional
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="Especial" name="edicion[]">Festivo Especial
                                </label>
                            </div>
                            <div class="form-group text-center">
                                <button type="button" class="btn btn-success accion" data-accion="modificaRunses">Crear</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Volver</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

PHP 工作正常并返回正确的值，但我给你看

if($_GET["accion"] == "recuperaRunses"){
    $dias   = Array('Lunes','Viernes','Sabado','Domingo','Local','Nacional','Especial');
    $datos_json = $otro = array();
    $id  = $_POST['recuperaFormulario'];
    $sql = "SELECT * FROM runses WHERE Id = $id";
    $consulta = $db->consulta($sql);
    while ($row = mysqli_fetch_array($consulta)) {
       $datos_json  = array('Rope' => $row['Rope'],'URL' => $row['URL'],'Proceso' => $row['Proceso'], 'Observaciones' => $row['Observaciones'] ,'Hora' => $row['Hora'],'Id' => $row['Id'] );
            $otro[$dias[$i]] = $row[$dias[$i]];
       }
    }
    $datos_json['Dias'] = $otro;
    echo json_encode($datos_json);
}

Answer 1

如 how do i check uncheck a checkbox input or radio button/ 中所述你需要使用 jQuery prop :

我根据您的代码创建了一个简短的片段，这样如果您尝试使用 attr/removeAttr 设置/取消设置按钮，您将会遇到麻烦。

而如果您使用 Prop ，您将永远不会失败。

片段:

$(function () {
  $('#setChecked').on('click', function(e) {
    $(':checkbox').attr('checked', 'checked');
  })

  $('#unSetChecked').on('click', function(e) {
    $(':checkbox').removeAttr('checked');
  })

  $('#newSetChecked').on('click', function(e) {
    $(':checkbox').prop('checked', true);
  })

  $('#newUnSetChecked').on('click', function(e) {
    $(':checkbox').prop('checked', false);
  })
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button id="setChecked">Set Checked</button>
<button id="unSetChecked">UnSet Checked</button>
<button id="newSetChecked">USE PROP INSTEAD Set Checked</button>
<button id="newUnSetChecked">USE PROP INSTEAD  UnSet Checked</button>
<div class="modal fade" id="modificaRunses" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form role="form" action="" method="post">
                    <div class="form-group">
                        <label>Runshet donde ira (puedes seleccionar más de una)</label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Lunes" name="edicion[]" >Lunes - Jueves
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Viernes" name="edicion[]">Viernes
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Sabado" name="edicion[]">Sábado
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Domingo" name="edicion[]">Domingo
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Local" name="edicion[]">Festivo Local
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Nacional" name="edicion[]">Festivo Nacional
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="Especial" name="edicion[]">Festivo Especial
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>