Question

我将创建一个选择选项并输入文本框以获取值并收集一些数字。

我需要做的就是 - 如果我从选择框中选择一个值，文本框应该被禁用。我在文本框中输入时会发生相反的情况 - 选择框应该被禁用。

这是我做的：

<select id="subject_items" name="subjectitems">
    <option value="none">Select</option>
    <option value="1-10">1-10</option>
    <option value="11-20">11-20</option>
    <option value="20-50">20-50</option>
    <option value="50+">50+</option>
</select>
<input type="text" name="txtsubitems" id="txtsubitems" placeholder="Or type exact number"/>   
<h4 id="showquote" class="formh4 text-center"></h4>

 <script>  

function multiplyVals(multiNum, firstNum, secondNum, addPhotoNum){
   var multiNum, multiNum, secondNum, addPhotoNum;
   var multiFirst = multiNum*firstNum + addPhotoNum*5 +30;
   var multisecond = multiNum*secondNum + addPhotoNum*5 +30;
   return "From "+ " $"+multiFirst +" To "+ " $"+multisecond;
 }              

function multiplyVals50(multiNum, firstNum, addPhoto){
    var multiNum, multiNum, addPhoto;
    var multiFirst = multiNum*firstNum + addPhoto*5 +30;
    return " $"+multiFirst+"+";
  }
function multiplyValsTxt(multiNum, firstNum, addPhoto){
    var multiNum, multiNum, addPhoto;
    var multiFirst = multiNum*firstNum + addPhoto*5 +30;
    return " $"+multiFirst;
  }
 function displayVals() {
     var numOfItem = $("#subject_items").val();
     var numOfitemSingle = $("#txtsubitems").val();
     var addPhoto = $("#add_photo").val();
     var $towVal = $('#subject_items'),  $oneVal = $('#txtsubitems');

      if(numOfItem == '1-10'){
                $("#showquote").html( multiplyVals(16, 1, 10, addPhoto));
                $oneVal.attr('disabled', 'disabled').val('');
                }
      else if(numOfItem == '11-20'){
                $("#showquote").html( multiplyVals(12, 11, 20, addPhoto));  
                }
      else if(numOfItem == '20-50'){
                $("#showquote").html( multiplyVals(9, 20, 50, addPhoto));   
                }
      else if(numOfItem == '50+'){
                $("#showquote").html(multiplyVals50(7, 50, addPhoto));  
                }
      else if(numOfitemSingle <=10){
                $("#showquote").html(multiplyValsTxt(16, numOfitemSingle, addPhoto));
                }
      else if(numOfitemSingle <20){
                $("#showquote").html(multiplyValsTxt(12, numOfitemSingle, addPhoto));
                }
      else if(numOfitemSingle <50){
                $("#showquote").html(multiplyValsTxt(9, numOfitemSingle, addPhoto));
                }
      else if(numOfitemSingle >50){
                $("#showquote").html(multiplyValsTxt(7, numOfitemSingle, addPhoto));
                }
      else {                    
                $("#showquote").html("<P>Please Choose the number of subject items </P>");\
                $oneVal.removeAttr('disabled');
           }        
   }//End displayVals function 

 $("select#subject_items").change(displayVals);
            var qqqq = window.setInterval( function(){
            displayVals()},10
            );
 </script>

Answer 1

使用.on()

更好地附加事件处理程序

将一个或多个事件的事件处理函数附加到选定的元素。

（1）在更改SELECT时，禁用文本框

$('#subject_items').on('change', function(){
 $('#txtsubitems').attr("disabled", "disabled"); 
});

类似地

（2）在更改INPUT时，禁用选择

$('#txtsubitems').on('change', function(){
     $('#subject_items').attr("disabled", "disabled"); 
    });

我无法在您的网站上查看此信息，而是fiddle

更新：

根据您的评论，

    $('#subject_items').on('change', function () {
    console.log($(this).val());
    if ($(this).val() !== 'none') {
        $('#txtsubitems').prop("disabled", true);
    } else {
        $('#txtsubitems').prop("disabled", false);
    }
});

$('#txtsubitems').on('change', function () {
    if ($(this).val() !== '') {
        $('#subject_items').prop("disabled", true);
    } else {
        $('#subject_items').prop("disabled", false);
    }
});

UPDATED FIDDLE

希望你明白。

当选择框值的更改时，jQuery函数添加attr禁用输入[text]，

1 个答案: