如果未保存，则拒绝对表单进行新的更改答案

【问题标题】：deny to make new changes to form if it is not saved如果未保存，则拒绝对表单进行新的更改
【发布时间】：2020-10-13 03:14:27
【问题描述】：

我有一个表单，其中有一个文本输入、单选按钮和一个选择。

我想要的是一次只能选择一次单选按钮，并且一次只能选择一个选项，如果我再次选择这两个选项中的任何一个，我希望代码不允许它，只有在数据已保存的情况下使用“guardar cambios”按钮。

这是因为每个选项都会将图像更改为另一个图像，而我只希望一次更改一个图像，然后将数据发送到表中。

if (!$('input[id^="prest"').is(":checked")) {
  $('select').attr('disabled', true)
  $('textarea').attr('disabled', true)
  $('.obserSelect').attr('disabled', true)
}
$('input[id^="prest"').on('click', function() {
  $('select[id$="Select"]').attr('disabled', false)
  $('textarea').attr('disabled', false)
  $('.obserSelect').attr('disabled', false)

})

$('input[id^="d"]').prop('disabled', true)
$('input[id$="Color"]').prop('disabled', true)
$('input[name="colorPrestacion"').prop('disabled', true)

$("#paciente").keyup(function() {
  var valPac = $(this).val();
  if ($(valPac !== 0)) {
    $('input[id^="d"]').prop('disabled', false)
    $('input[id$="Color"]').prop('disabled', false)
    $('input[name="colorPrestacion"').prop('disabled', false)

  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">




<div class="container-fluid">
  <div class="card tarjetaDatos">
    <div class="card-body">
      <div class="card-title d-flex justify-content-center">
        <h5>Ingrese los datos del odontograma</h5>
      </div>
      <hr>
      <div id="tratamientos">
        <div class="row">
          <div class="col-md-4">
            Seleccione paciente
            <div class="m-1"></div>
            <input class=" pacInput" autocomplete="off" list="browsers" name="paciente" id="paciente">
          </div>
          <div class="col-md-4">
            Seleccione el tipo de Prest. requerida
            <div class="form-inline">
              <input type="radio" id="prestExistente" name="colorPrestacion" value='rojo'>
              <div class="mr-1"></div>
              <font style="color:red"> Prestaciones existentes</font>
            </div>
            <div class="row">
              <div class="col-md-12">
                <input type="radio" id="prestRequerida" name="colorPrestacion" value='azul'>
                <font style="color:blue"> Prestaciones requeridas</font>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            Seleccione referencia
            <select class="form-control" name="tratamientos" id="tratSelect">
              <option value='none' selected disabled>Seleccione referencia</option>
              <option value="1">Obturación/caries</option>
              <option value="2">Corona</option>
              <option value="3">Puente</option>
            </select>
          </div>
          <div class="row">
            <button type="submit" class="btn btn-primary " style="width:100%">Guardar cambios</button>
          </div>
        </div>
      </div>
      <br>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

有人可以告诉我如何制作这个吗？非常感谢。

【问题讨论】：

标签： javascript html jquery forms

【解决方案1】：

首先要说这似乎是糟糕的用户体验设计。并且不太确定这是否是一个想要的结果：

$("[name='colorPrestacion']").on("click", function() {
  $("[name='colorPrestacion']").prop('disabled', true);
});
$("#tratSelect").on("click", function() {
  $(this).prop('disabled', true);
});
$("button[type='submit']").on("click", function() {
  $("[name='colorPrestacion']").prop('disabled', false).prop('checked', false);
  $("#tratSelect").prop('disabled', false).prop("selectedIndex", 0);
});

这将在无线电检查和选择选项时将两者都禁用，并在单击按钮后重置。如果用户在没有保存的情况下更改了他的设置，您至少应该将通用重置按钮重置为所有...

if (!$('input[id^="prest"').is(":checked")) {
  $('select').attr('disabled', true)
  $('textarea').attr('disabled', true)
  $('.obserSelect').attr('disabled', true)
}
$('input[id^="prest"').on('click', function() {
  $('select[id$="Select"]').attr('disabled', false)
  $('textarea').attr('disabled', false)
  $('.obserSelect').attr('disabled', false)

})

$('input[id^="d"]').prop('disabled', true)
$('input[id$="Color"]').prop('disabled', true)
$('input[name="colorPrestacion"').prop('disabled', true)

$("#paciente").keyup(function() {
  var valPac = $(this).val();
  if ($(valPac !== 0)) {
    $('input[id^="d"]').prop('disabled', false)
    $('input[id$="Color"]').prop('disabled', false)
    $('input[name="colorPrestacion"').prop('disabled', false)

  }
})

$("[name='colorPrestacion']").on("click", function() {
  $("[name='colorPrestacion']").prop('disabled', true);
});
$("#tratSelect").on("click", function() {
  $(this).prop('disabled', true);
});
$("button[type='submit']").on("click", function() {
  $("[name='colorPrestacion']").prop('disabled', false).prop('checked', false);
  $("#tratSelect").prop('disabled', false).prop("selectedIndex", 0)
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">




<div class="container-fluid">
  <div class="card tarjetaDatos">
    <div class="card-body">
      <div class="card-title d-flex justify-content-center">
        <h5>Ingrese los datos del odontograma</h5>
      </div>
      <hr>
      <div id="tratamientos">
        <div class="row">
          <div class="col-md-4">
            Seleccione paciente
            <div class="m-1"></div>
            <input class=" pacInput" autocomplete="off" list="browsers" name="paciente" id="paciente">
          </div>
          <div class="col-md-4">
            Seleccione el tipo de Prest. requerida
            <div class="form-inline">
              <input type="radio" id="prestExistente" name="colorPrestacion" value='rojo'>
              <div class="mr-1"></div>
              <font style="color:red"> Prestaciones existentes</font>
            </div>
            <div class="row">
              <div class="col-md-12">
                <input type="radio" id="prestRequerida" name="colorPrestacion" value='azul'>
                <font style="color:blue"> Prestaciones requeridas</font>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            Seleccione referencia
            <select class="form-control" name="tratamientos" id="tratSelect">
              <option value='none' selected disabled>Seleccione referencia</option>
              <option value="1">Obturación/caries</option>
              <option value="2">Corona</option>
              <option value="3">Puente</option>
            </select>
          </div>
          <div class="row">
            <button type="submit" class="btn btn-primary " style="width:100%">Guardar cambios</button>
          </div>
        </div>
      </div>
      <br>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

【讨论】：

谢谢你，但我能问一下你为什么说这是一个糟糕的用户体验吗？也许看起来是这样，因为我没有显示整个代码。您的答案有效，但选择选项同时打开并被禁用，我在那里更改了点击更改。
@luz 是的，更改也可以工作（顺便说一句，在 Firefox 中它在点击时可以正常工作）。也许是这样，我没有看到整个代码，但在我看来，通常否认用户在保存/提交之前也改变主意是不好的用户体验。
哦，我明白我会记住这一点。也许撤消会起作用？
@luz 就像我提到的一些重置或像你一样悲伤的撤消按钮作为一个选项可以解决这个问题。奥尔多我不明白“这是因为每个选项都会改变另一个图像”的全部问题，无论如何，要点是尽可能少地限制用户，所有问题都应该以编程方式“在幕后”处理。无论如何，这只是一个建议。
这是我的意思示例，以便您了解有关图像的内容，选择选项后必须单击一个codepen.io/luzsdx/pen/ExKqwXP

【解决方案2】：

将此添加到底部应该可以工作

$('input[name="colorPrestacion"]').on('change',function(){
        $('input[name="colorPrestacion"]').attr('disabled',true);
      })
      $('#tratSelect').on('change',function(){
        $('#tratSelect').attr('disabled',true)
      })
      
      $('button[type="submit"]').on('click',function(){
        if($('input[name="colorPrestacion"]').val() && $('#tratSelect').val()){
             $('input[name="colorPrestacion"').prop('disabled', false)
        }
      })

【讨论】：