Question

当输入框处于活动状态时，如何禁用选择框。当我提交表单时，我只需要发送1个参数，即可选择或输入。也许有人有一个主意。

<!doctype html>
<html>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <body>
      <script>
	  var selectData = {

  "sel1":{
    	
	   "100":"select100", //select data
		"101":"select101",//select data
		 "102":"select102",//select data
		  "103":"select103",//select data
		   "104":"select104",//select data
		   	"":"",
	
  },
   "sel2":{
    	
	 "201":"select201", // select data
	   "202":"select202",
		 "203":"select203",
		  "204":"select204",
		   "205":"select205"
	
  },
   "sel3":{
    	
	  "301":"select301",
	    "302":"select302",
		 "303":"select303",
		  "304":"select304",
		   "305":"select305"
	
 
  }
  };
    jQuery(document).ready(function($) {
      $(document).on('click', '.specialLink', function(event) {

        var radio2 = document.getElementById('radio2');
        if (radio2.checked == false) {
          radio2.checked = true;
          toggleRadio();
        }

        event.preventDefault();
        var b = $(this),
          buttonId = b.attr('id'),
          selectSet = selectData[buttonId],
          selectField = $('#specialLink');
        selectField.empty();
        if (selectSet) {
          $.each(selectSet, function(k, v) {
            selectField.append($('<option>', {
              value: k,
              text: v
            }));
          });
        }
        return false;
      });
    });
    </script>
      
    <li><a href="#" id="sel1" class="specialLink">Selectlist1</a></li>
     <li><a href="#" id="sel2" class="specialLink">Selectlist2</a></li>
      <li><a href="#" id="sel3" class="specialLink">Selectlist3</a></li>
    
    
        <form method="post" name="multiform" id="form8" action="/search" onchange="toggleRadio();">
            <label for="radio1">INPUT Text</label>
            <input id="radio1" type="radio" name="select" checked />
            <label for="radio2">SELECT from</label>
            <input id="radio2" name="select" type="radio" />
            <label id="textLabel" for="textin">Formular
                <input id="textin" name="fromtext" type="text" placeholder="test1" />
            </label>
            <label id="selectLabel" for="specialLink">Items
                <select name="fromlist" id="specialLink">
                  <option selected> choose a selectlist first</option>
                
                </select>
            </label>
            <input value="Search"  type="submit"> 	
        </form>
        <script>
function toggleRadio() { // will activate when the form will change.
    var radio1 = document.getElementById('radio1'); // radio 1
    var radio2 = document.getElementById('radio2'); // radio 2
    if (radio1.checked == true) { // if the first checked display input and hide select
        document.getElementById('textLabel').style.display = 'block';
        document.getElementById('selectLabel').style.display = 'none';
       
    }
    else { // because i got only 2 option i don't have to use another condition
        document.getElementById('textLabel').style.display = 'none';
        document.getElementById('selectLabel').style.display = 'block';
        document.getElementById('textin').value = ''; // clear input
    }
}
toggleRadio(); // call the function
        </script>
    </body>
</html>

当输入框处于活动状态时，如何禁用选择框。当我提交表单时，我只需要发送1个参数，即可选择或输入。也许有人有一个主意。

Answer 1

在客户端，可以在选择输入时清空select的字段值，反之亦然。在服务器端，您可以使用自定义变量来检测哪个是实际输入（即输入或选择），并使用简单的if-else语句进行处理

Answer 2

您可以在以下函数中使用jQuery函数$(awesomeObject).prop();：

if ($("#radio1").checked == true) {
    $("#specialLink").prop("disabled", true);
}

当输入的属性禁用为True时，它将停止前往服务器。

参见此处：http://api.jquery.com/prop/

输入元素处于活动状态时如何禁用选择字段？

2 个答案: