jQuery函數當選擇框值的onchange添加屬性禁用輸入[文字]，

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

希望你能理解。