How to disable another SELECT form?-CodePudding

I do have this script, which should hide/display DIVs based on selected option. It works great.

But I need to disable another DIVs (SELECTS, etc.) which are not currently choose based on the main select TYPE. The reason is I do have the same name for SELECT in every hidden DIV (possibility1); so when I choose in the first main select TYPE = 1 (and click to SEND button), it transfers values from TYPE = 2 (option value X, instead of eg. option value A).

Could you please help me? Thanks!

<form action="#" method="post" id="text">
  <select name="type" id="type">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
      
  
  <script>
     $(function() {$('#type').change(function(){ $('.possibility').hide(); $('#'   $(this).val()).show(); }); });                                        
      </script>
  
   <!-- IF TYPE = 1 -->                                
  <div id="1"  style="<?php if($_POST[type]=="1" || $_POST[type]==""){echo 'display:block;';} else {echo 'display:none;';} ?>">
        <select name="possibility1" id="possibility1">
          <option value="A">A</option>
          <option value="B">B</option>
        </select>    
  </div>
  
  <!-- IF TYPE = 2 -->
  <div id="2"  style="<?php if($_POST[type]=="2"){echo 'display:block;';} else {echo 'display:none;';} ?>">
        <select name="possibility1" id="possibility1">
          <option value="X">X</option>
          <option value="Y">Y</option>
        </select>                                          
  </div> 
  
  <input type="submit" name="send" value="send" >
</form>

<?php
    if(isset($_POST['send'])) {  
    echo  $_POST[possibility1]; 
}
?>

I tried to add to script this code, but it doesn't work.

 $(function() {
  $('#type').change(function(){ 
    $('.possibility *').prop('disabled', true); 
    $('#'   $(this).val() ' *').prop('disabled', false); 
  });
});

CodePudding user response：

$(function() {
  $('#type').change(function() {
    $('.possibility *').prop('disabled', true);
    $('#'   $(this).val()   ' *').prop('disabled', true);
  });
});

change into

document.queryselctor("#type").remove()

and you can share full code

CodePudding user response：

All right, this works :)

$(function() {
    $('#type').change(function() {
        $('.possibility').hide();
        $('.possibility select').attr("disabled", "disabled");         

        $('#'   $(this).val()).show();
        $('#'   $(this).val()   ' select').removeAttr("disabled");
    });
       
    $('#type').change();
});