Как поменять флажок по значку проверки, а не вводить?

Question

У меня есть две формы. #form1 содержит дату и кнопку дисплея. Кнопка Показать позволяет скрыть #form1 и отобразить #form2. Эта форма содержит выбранную дату и таблицу данных с флажками.

Когда я отображаю таблицу, я хочу, чтобы только флажки, которые подтверждают, что эти два условия стали значком «действительный», а не ввод данных таблицы.

$(document).ready(function() {
  $("#form2").hide();
  $("#hide").click(function() {
    $("#form1").hide();
    $("#form2").show();
    let dat = $("#dateS").val();
    $("#da").text(dat);
    $("tr").each(function(i, r) {
      let mat = $(r)[0].cells[2].innerText;
      for (var i = 0; i < 2; i++) {
        if (dat == "2020-02-17" && mat == "52") {
          $(r).find("input").first().replaceWith('<span style="color: green;font-weight:  bolder;">✔</span>');
        }
      }
    });
  });
})

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="form1">
  <div class=" col-md-10 col-md-offset-1">
    <div class="form-group col-md-3">
      <label for="titre">date</label>
    </div>
    <div class="form-group col-md-5">
      <input type="date" name="dateS" id="dateS" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-md-offset-3">
    <div class="form-group col-md-2">
      <button class="btn btn-primary" id="hide" data-url="">show</button>
    </div>
  </div>
</div>

<div id="form2">
  <div class="col-md-10 col-md-offset-1">
    <h4>dateS : <span id="da"></span></h4>
  </div>
  <table class="table table-bordered" id="mytable">
    <tr>
      <th><input type="checkbox" id="check_all"></th>
      <th>nom</th>
      <th>matricule</th>
      <th>adresse</th>
      <th>prime</th>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox"></td>
      <td>najib</td>
      <td>52</td>
      <td>tihit</td>
      <td><input type="text" name="prime" class="form-control prime" value="0"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox"></td>
      <td>adil</td>
      <td>62</td>
      <td>tagmast</td>
      <td><input type="text" name="prime" class="form-control prime" value="0"></td>
    </tr>
  </table>
  <div class="form-group col-md-offset-5 ">
    <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
  </div>
</div>

Answer 1

вам нужно добавить тип ввода, который вы хотите заменить.

$(document).ready(function() {
  $("#form2").hide();
  $("#hide").click(function() {
    $("#form1").hide();
    $("#form2").show();
    let dat = $("#dateS").val();
    $("#da").text(dat);
    $("tr").each(function(i, r) {
      let mat = $(r)[0].cells[2].innerText;
      for (var i = 0; i < 2; i++) {
        if (dat == "2020-02-17" && mat == "52") {
          $(r).find("input:checkbox").replaceWith('<span style="color: green;font-weight:  bolder;">✔</span>');
          
        }
      }
    });
  });
})

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="form1">
  <div class=" col-md-10 col-md-offset-1">
    <div class="form-group col-md-3">
      <label for="titre">date</label>
    </div>
    <div class="form-group col-md-5">
      <input type="date" name="dateS" id="dateS" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-md-offset-3">
    <div class="form-group col-md-2">
      <button class="btn btn-primary" id="hide" data-url="">show</button>
    </div>
  </div>
</div>

<div id="form2">
  <div class="col-md-10 col-md-offset-1">
    <h4>dateS : <span id="da"></span></h4>
  </div>
  <table class="table table-bordered" id="mytable">
    <tr>
      <th><input type="checkbox" id="check_all"></th>
      <th>nom</th>
      <th>matricule</th>
      <th>adresse</th>
      <th>prime</th>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox"></td>
      <td>najib</td>
      <td>52</td>
      <td>tihit</td>
      <td><input type="text" name="prime" class="form-control prime" value="0"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox"></td>
      <td>adil</td>
      <td>62</td>
      <td>tagmast</td>
      <td><input type="text" name="prime" class="form-control prime" value="0"></td>
    </tr>
  </table>
  <div class="form-group col-md-offset-5 ">
    <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
  </div>
</div>