javascript - JQuery function when onchange of select box value add attr disabled to input[text], - Stack Overflow

admin管理员组

文章数量:1417031

I'm going to make a select option and input textbox to take the values and collect some numbers.

All I need to do is - If I select a value from the select box the text box should get disabled. The opposite should happen when I type on the text box - the select box should get disabled.

Here is what I did:

<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>

I'm going to make a select option and input textbox to take the values and collect some numbers.

All I need to do is - If I select a value from the select box the text box should get disabled. The opposite should happen when I type on the text box - the select box should get disabled.

Here is what I did:

<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>

• javascript
• jquery
• html
• function

Share Improve this question Follow edited Jul 18, 2013 at 7:11 JS-Hero asked Jul 18, 2013 at 3:35 JS-HeroJS-Hero 31711 gold badge77 silver badges1818 bronze badges 4

• 1 Your problem is not clear. What problem you are actually facing. I can see that you are only using the select change event. You've to use keyup or keydown event for textbox to disable the select box. – Zahid Riaz Commented Jul 18, 2013 at 3:43
• how can I do that, I tried many ways and doesn't wrok with me – JS-Hero Commented Jul 18, 2013 at 3:46
• check the site fahmynow./blue – JS-Hero Commented Jul 18, 2013 at 4:00
• 1 You should always use jQuery.prop() to toggle the disabled state of an element. jQuery.attr() does not work the way you think it does. – jahroy Commented Jul 18, 2013 at 4:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Better attach an event handler using .on()

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

(1) On changing the SELECT, disable the textbox

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

Similarly

(2) On changing the INPUT, disable the select

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

I can't check this with your site, rather here is a fiddle

UPDATES:

From your ments,

    $('#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

Hope you understand.

本文标签：