Question

我想用某种形式对他们喜欢和不喜欢的工作进行排名，我想要的是，当用户在第一个input:number上输入数字4时，他们不能在第二个{上输入相同的数字{1}}，我也想只将输入表单1限制为5，所以我在输入：number上输入了最小值和最大值，以防止用户写的数字大于5，但似乎只有在提交表单后才能使用，我希望在用户输入数字时自动创建。

这是我的表格

input:number

我该怎么做？欢迎任何建议，是否可以使用二维单选按钮（从未听说过）？

Answer 1

您必须在输入值更改时向其添加事件，并针对每个输入值（如果其不为空）检查值，则以下代码应该起作用

注意：我在以下示例中使用jQuery

jQuery('input[type="number"]').change(function(){
 var currentObj = jQuery(this)[0];
  jQuery('#error').empty('');
  if(jQuery(this).val() > 5){
      jQuery('#error').append('<p>number must be not more than 5</p>');
    jQuery(this).val('');
  }
  jQuery('input[type="number"]').each(
    function(i,v){
      if(jQuery(v).val()){
      if(jQuery(v).attr('name') !== currentObj.name){
        if(jQuery(v).val() == currentObj.value){
            jQuery('#error').append('<p>number must ne unique</p>');
            jQuery('input[name="'+currentObj.name+'"').val('');
            console.log(currentObj.name); 
        }
      }
      }
  });
});

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div id="error"></div>
<form action="result.php" method="post" id="form"> 
<input required type="number" min="1" max="5" name="11">
<input required type="number" min="1" max="5" name="12">
<input required type="number" min="1" max="5" name="13">
<input required type="number" min="1" max="5" name="14">
<input required type="number" min="1" max="5" name="15">
<button class="button3" name="click" >Submit</button>

JSBIN演示-https://jsbin.com/gazehik/edit?html,js,console,output

Answer 2

我建议您将select / option与JQuery结合使用：

<form id='form1' action="result.php" method="post" id="form"> 
    Job A:<select id='option1' required><option value=''><option value='1'>1<option value='2'>3<option value='3'>3<option value='4'>4<option value='5'>5</select>
    &nbsp;Job B:<select id='option2' required><option value=''><option value='1'>1<option value='2'>3<option value='3'>3<option value='4'>4<option value='5'>5</select>
    &nbsp;Job C<select id='option3' required><option value=''><option value='1'>1<option value='2'>3<option value='3'>3<option value='4'>4<option value='5'>5</select>
    &nbsp;Job D:<select id='option4' required><option value=''><option value='1'>1<option value='2'>3<option value='3'>3<option value='4'>4<option value='5'>5</select>
    &nbsp;Job E:<select id='option5' required><option value=''><option value='1'>1<option value='2'>3<option value='3'>3<option value='4'>4<option value='5'>5</select> 
    <button class="button3" name="click" >Submit</button>
    </form>

和JQuery脚本为：

$("#form1").find("select").each(function(){
        $(this).change(function(){ //if any select input is changed
            var changedId = $(this).attr('id'); //store the changed id
            var valSelected = $(this).val(); //store the selected value

            $("#form1").find("select").each(function(){ // loop through form1 again 
                var loopId = $(this).attr('id');
                if(loopId!==changedId){ //every select in put, but selected
                    $(this).find('option').each(function(){ //loop through every option
                        if($(this).val()===valSelected){ // make the selected option disabled
                            $(this).attr('disabled',true);
                        }
                    });
                }
            });
        });
    });

按输入表的排名值

2 个答案: