how to disable input text on condition-CodePudding

i would want to disable some input text when a certain condition is met. one input text value will be used as a key of the condition. imagine having 6 input and 2 getting data from table and these getting data from table 1 to store condition value. i want a scenario like, if text2.value is 'test' then text3 and text 4 should be disable.

this is what i have done am tagging js,jq and hmtl maybe one could provide an assistance

html

          <input type="hidden" name="ttype[<?php echo $ix ?>]" value="<?php echo 
          $rowx['testtype']; ?>"/>
                                         
                                         
         <td colspan="0">  Result <br> 
        <div>
          <select name="negpos[<?php echo $ix ?>]"     style='width:50px'>
          <option selected value=''> Select One </option>
          <option value='Pos'> Positive</option>
          <option value='Neg'> Negative</option>
          <option  value='N/P'> Not Provided</option>
          </select>
          <span id="sresultInfo">
          </span>
          </div>
          </td> 

        
                                     
          <td><input type="text"   name="WBC[<?php echo $ix ?>]"size ="3" /></td>
           <td><input type="text" name="HGB[<?php echo $ix ?>]"size ="3" /></td>
           <td> <input type="text" name="RBC[<?php echo $ix ?>]" size ="3" value=""/></td>
            <td><input type="text" name="Lymph[<?php echo $ix ?>]"size ="3"/></td>
            <td><input type="text" name="MCV[<?php echo $ix ?>]" size ="3"/></td>
            <td><input type="text" name="Gran[<?php echo $ix ?>]" size ="3"/></td>
            <td> <input type="text" name="MCH[<?php echo $ix ?>]" size ="3"/> </td>

        $(document).ready(function(){
     
    
         var ttyp =   document.getElementById("ttype").value  ;
 
            if (ttyp = "MPP" ){
 
          document.getElementById('WBC').disabled = true;
          document.getElementById('HBG').disabled = true;
          document.getElementById('RBC').disabled = true;

         } else {

          document.getElementById('WBC').disabled = false;
          document.getElementById('HGB').disabled = false;
          document.getElementById('RBC').disabled = false;

         }
     
       });

CodePudding user response：

You can do something similar to this. The disabletext represents the text to match to disable and disablefieldids is the list of comma seperated value which contain id of the field to disable.

 $('input').on('change', function() {
                var conditions = $(this).data();
                var inputValue = $(this).val();

                if(inputValue == conditions.disabletext) {
                    conditions.disablefieldids.split(",").map(function(id) {
                        $('#' id).attr('disabled', 'disabled');
                    })
                }else {
                    conditions.disablefieldids.split(",").map(function(id) {
                        $('#' id).removeAttr('disabled');
                    })
                }
                  
                  
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
          <tr>
            <td>
                <input type="text" data-disabletext="test" data-disablefieldids="HGB,RBC"  name="WBC"size ="3" />
            </td>
           <td><input type="text" id="HGB" name="HGB"size ="3" /></td>
           <td> <input type="text" id="RBC" name="RBC" size ="3" value=""/></td>
            <td><input type="text" id="Lymph" name="Lymph"size ="3"/></td>
            <td><input type="text" id="MCV" name="MCV" size ="3"/></td>
            <td><input type="text" id="Gran" name="Gran" size ="3"/></td>
            <td> <input type="text" id="MCH" name="MCH" size ="3"/> </td>
          </tr>

</table>

CodePudding user response：

Instead of storing disable text and fields to input attributes I would like create one general object so it will give us more usability,

const InputCondition = [
            {"disabletext":"Test","disablefieldids":["HGB","RBC"]},
            {"disabletext":"ABC","disablefieldids":["MCV","MCV"]}
           ];

here is the on change initialization (change as per your need)

 $('input').on('change', function () {
    func_makeInputdisable($(this).val());
});


// you can call this onl oad // pass the text value in param.
function func_makeInputdisable(lookingForText) {
    let matches = InputCondition.find(x => x.disabletext == lookingForText.trim()).disablefieldids;

    //Remove all the disable inputs if in need
    //$('.AllInputClass').removeAttr('disabled');

    if (matches.length > 0) {
        $.each(matches, (index, inputID) => {
            let $ele = $(`#${inputID}`);

            if (typeof ($ele) != 'undefined')
                $ele.attr('disabled', 'disabled');

        });
    }
}

// To enable textbox just add the same class on each input and use like, $('.AllInputClass').removeAttr('disabled'); placed in comment above function with class name "AllInputClass"