javascript - 当选择框值 onchange 时的 JQuery 函数将禁用的 attr 添加到 input[text]，

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() 附加事件处理程序

Attach an event handler function for one or more events to the selected elements.

(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

希望您能理解。