创建和修改元素时加载 JS 时出现问题

Question

我希望你能帮助我解决我在执行 JS 时遇到的这些问题，我将详细说明两个问题：创作时我正在使用change和select事件来了解我是否正在选择和更改问题中的选项combobox。问题是当我选择SINGLE / MULIPLE ANSWER问题类型的选项 1 时。如果保存时我没有checkbox从可用选项中选择任何选项，它会向我发出警报，要求我至少选择一个选项，到目前为止，一切对我来说都很好，但是当我checkbox从选项中选择一个并尝试保存时，警报会出现不会消失。我尝试添加该事件checked，但它对我不起作用。我想要做的是，当我保存并且没有选择选项时，它会向我抛出警报消息（这已经是这样），当我选择一个选项时，警报消失，以便它允许我保存。修改时第二个问题发生在我尝试修改一个元素时，JS 不运行，因此它可以工作，我必须选择另一个选项并返回到前一个选项，以便它可以工作。JS$(".dynamicform_wrapper").on("change","select",function(){             if ($(this).val()== 2) {            $('#0').find('.option-item').not(':first').remove(); //removed all entries found in            $('#0').find('.option-item:first').hide();             $('#0').find('.item-option').hide();             $('#0').find('.question').attr('colspan',2);        }else if ($(this).val()== 1){            //var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;            var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;            $('#0').find('.container-options').append(newtr); //add input            $('#0').find('.item-option').show();             $('#0').find('.question').removeAttr('colspan',2);            $( "#dynamic-form" ).submit(function( event ) {                if(numberChecked > 0){                    $('#0').find('.text-error-check').hide();                    $('#0').find('.dynamicform_inner').removeAttr("style");                } else {                    $('#0').find('.text-error-check').show();                    $('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});                    event.preventDefault();                }            });       }});希望你能帮助我解决这些问题，我不太擅长使用 javascript 或 jquery。我预先感谢您的支持。

Answer 1

0在您当前的代码中，您使用错误的选择器来获取选中复选框的总值。如果您检查当前的 jquery 代码，即使您检查了任何值，它也总是给出。因此，您可以使用input[type="checkbox"]:checked它将为您提供选中复选框的正确值。

然后，您将事件放置submit在更改事件中，这就是第一次显示警告的原因，但是当您选择某个复选框并再次单击“保存”按钮时，它不会消失（也是因为选择器错误），所以我将其分开从变更事件来看。

另外，当选择框值为ie 时，您忘记显示tr您所拥有的：因此当值为 时添加到它。hide()2item-option.show()1

工作代码：

$(".dynamicform_wrapper").on("change", "select", function() {

  if ($(this).val() == 2) {

    $('#0').find('.option-item').not(':first').remove(); //removed all entries found in

    $('#0').find('.option-item:first').hide();

    $('#0').find('.item-option').hide();

    $('#0').find('.question').attr('colspan', 2);

  } else if ($(this).val() == 1) {

    // $('#0').find('.container-options').append(newtr); //add input

    $('#0').find('.item-option').show();

    $('#0').find('.option-item:first').show(); //show option-item which is hidden

    $('#0').find('.question').removeAttr('colspan', 2);

  }

});

$("#dynamic-form").submit(function(event) {

  //getting all inputs which is under tr 

  var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;

  console.log("No of checkbox checked=" + numberChecked)

  if (numberChecked > 0) {

    $('#0').find('.text-error-check').hide();

    $('#0').find('.dynamicform_inner').removeAttr("style");

     event.preventDefault();//remove this to submit

  } else {

    $('#0').find('.text-error-check').show();

    $('#0').find('.dynamicform_inner').css({

      'border': '2px solid #dd4b39',

      'background-color': 'white'

    });

    event.preventDefault();

  

  }

   

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<form id="dynamic-form" action="" method="post">

  <div class="content">

    <div class="box box-success box-solid">

      <div class="box-header with-border">

        <h3 class="box-title">Evaluation</h3>

      </div>

      <div class="panel-body">

        <div class="dynamicform_wrapper"> //where select and change applies

          <table class="table table-bordered table-striped">

            <thead>

              <tr>

                <th>Questions</th>

                <th style="width: 500px;">Options</th>

                <th class="text-center" style="width: 90px;">

                  <button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>

                </th>

              </tr>

            </thead>

            <tbody class="container-items">

              <tr id="0" class="item">//ID that I use to find the elements

                <td class="question"> //where do i apply colspan

                  <table class="table table-bordered table-striped">

                    <tbody>

                      <tr>

                        <td class="vcenter">

                          <span class="panel-title-address">Nr: 1</span>

                        </td>

                        <td class="vcenter">

                          <input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">

                          <div class="form-group field-qquestion-0-type_id required">

                            <label class="control-label" for="qquestion-0-type_id">Question Type</label>

                            <select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">

                              <option value="">-- Select --</option>

                              <option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1

                              <option value="2">OPEN QUESTION</option> // OPTION 2

                            </select>

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-title required">

                            <input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-score required">

                            <input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-image">

                            <label class="control-label" for="qquestion-0-image">Image</label>

                            <input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">

                            <p class="help-block help-block-error"></p>

                          </div>

                          <div class="form-group field-qquestion-0-justify_answer">

                            <div class="checkbox">

                              <label style="padding:5px;" for="qquestion-0-justify_answer">

                                                            <input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">

                                                            Do you want the answer to be justified?

                                                            </label>

                              <p class="help-block help-block-error"></p>

                            </div>

                          </div>

                        </td>

                        <td class="clearfix"></td>

                      </tr>

                    </tbody>

                  </table>

                </td>

                <td class="item-option">

                  <div class="dynamicform_inner">

                    <table class="table table-bordered">

                      <thead>

                        <tr>

                          <th>Description</th>

                          <th class="text-center">

                            <button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>

                          </th>

                        </tr>

                      </thead>

                      <tbody class="container-opciones">

                        <tr class="option-item">

                          <td class="vcenter">

                            <input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">

                            <div class="input-group">

                              <span class="input-group-addon">

                                                                <div class="form-group field-qoption-0-0-opcion_correcta required">

                                                                    <div class="checkbox">

                                                                        <label style="padding:5px;" for="qoption-0-0-opcion_correcta">

                                                                            <input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">

                                                                        </label>

                                                                        <p class="help-block help-block-error"></p>

                                                                    </div>

                                                                </div>                    

                                                            </span>

                              <div class="form-group field-qoption-0-0-title_option required">

                                <input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">

                                <p class="help-block help-block-error"></p>

                              </div>

                            </div>

                          </td>

                          <td class="text-center vcenter" style="width: 90px;">

                            <button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>

                          </td>

                        </tr>

                      </tbody>

                    </table>

                  </div>

                  <div class="form-group text-error-check required has-error" style="display: none;">

                    <p class="help-block help-block-error">You must select at least 1 option as correct.</p>

                  </div>

                </td>

                <td class="text-center vcenter" style="width: 90px; verti">

                  <button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>

                </td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

    </div>

  </div>

  <div class="form-group">

    <button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>

  </div>

  <br>

  <br>

  <br>

  <br>