JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
  <input type="text" id="qqq"><br>
  <input type="text" id="jjj"><br>
  <input type="checkbox" data-select="#rrr" class="radio" id="checkbox_check_1" checked>
  <input type="checkbox" data-select="#ttt" class="radio" id="checkbox_check_2">
  <br>
  <div id="fff" style="display:block;">
    <select id="rrr">
      <option value="0" select="selected">Select 1</option>
      <option value="1">Select 1 первый</option>
      <option value="2">Select 1 второй</option>
      <option value="3">Select 1 третий</option>
    </select>
  </div>
  <div id="yyy" style="display:none;">
    <select id="ttt" disabled="false">
      <option value="0" select="selected">Select 2</option>
      <option value="1">Select 2 первый</option>
      <option value="2">Select 2 второй</option>
      <option value="3">Select 2 третий</option>
    </select>
  </div>
</center>

JavaScript

$('.radio').change(function() {
  const thisCheckbox = $(this)
  const isChecked = thisCheckbox.is(':checked')
  const select = $(thisCheckbox.data('select'))
  const allSelects = $('select')

  $('.radio').not(thisCheckbox).prop('checked', false)

  allSelects.parent().hide()
  allSelects.prop('disabled', true)

  if (isChecked) {
    select.parent().show()
    select.prop('disabled', false)
    select.val(0)
  }
})