setAttribute does not work

0

Good afternoon, I want to put a code that deactivates an input when I have another asset. At the moment I have this and it works perfectly:

<div class="col-sm-5 col-sm-offset-1">
  <div class="form-group label-floating">
   <input type="hidden" id='name' name='name' class="form-control" value="<?php echo $_SESSION['name']?>"/>
    <div class="radio">
     <label>
     <input type="radio" name="bd" value="op1" checked id="op1" onClick="javascript:houseclean();">Op1
     </label>
     <label>
     <input type="radio" name="bd" value="op2" id="op2" onClick="javascript:houseclean();">Op2
     </label>
     <label>
     <input type="radio" name="bd" value="examenes"  id="examenes" onClick="javascript:houseclean();">Op3
     </label>
    </div>
</div>

   <div class="col-sm-5">
<div class="form-group label-floating">
<label class="control-label">Tema</label>
<select class="form-control" name="category" id="category">
<option disabled="" selected=""></option>
<?php
$query = mysql_query("select * from categories where active = 's' order by id ASC");
while($row = mysql_fetch_array($query)){ ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']." - ".substr($row['descripcion'], 0, 20)."..."; ?></option>
<?php } ?>
</select>

               Bl. one        Bl. two                                                                        Bl. 3                                                                       Bl. 4     

    <script>
    function houseclean() {
      if ((document.getElementById('grupo1').checked == false) && (document.getElementById('grupo2').checked == false) && (document.getElementById('grupo3').checked == false) && (document.getElementById('grupo4').checked == false)) {
        document.getElementById('category').removeAttribute('disabled');

      } else {
        category.value = "";
        document.getElementById('category').setAttribute('disabled', 'disabled');
      }
    }
    </script>

For now, when I activate any "group" checkbox, I disable the "category" input and vice versa. That's fine, but what I want to do is that when I give the third option of the radio input "exams" I can deactivate and delete the "group" and "category" checkboxes. I would also like the opposite, that if I do some check in "group" or put a subject in "category" I delete and deactivate the third radio option ...

    
asked by Vieira 02.11.2017 в 17:03
source

1 answer

2

What you have to do is use the same logic of using the attribute checked as you did in your checkboxes, just add a new block if{...}else{...} where you capture the value of your radio and based on whether or not it is checkeado you do your functions to hide the checkboxes and the select category:

function houseclean() {
  if (document.getElementById('examenes').checked == true) {
    var select = document.getElementById('category');
    select.style.visibility = 'hidden';
    select.setAttribute('disabled', 'disabled');
    document.getElementsByClassName('checkbox')[0]
      .style.visibility = 'hidden';
  } else {
    var select = document.getElementById('category');
    select.style.visibility = 'visible';
    select.setAttribute('disabled', 'disabled');
    document.getElementsByClassName('checkbox')[0]
      .style.visibility = 'visible';
  }
  if (
    (document.getElementById('grupo1').checked == false) &&
    (document.getElementById('grupo2').checked == false) &&
    (document.getElementById('grupo3').checked == false) &&
    (document.getElementById('grupo4').checked == false)
  ) {
    document.getElementById('category')
      .removeAttribute('disabled');
  } else {
    category.value = "";
    document.getElementById('category')
      .setAttribute('disabled', 'disabled');
  }
}
<div class="col-sm-5 col-sm-offset-1">
  <div class="form-group label-floating">
    <input type="hidden" id='name' name='name' class="form-control" value="<?php echo $_SESSION['name']?>" />
    <div class="radio">
      <label>
                 <input type="radio" name="bd" value="questions" checked id="questions" onClick="javascript:houseclean();">
                Op1
             </label>
      <label>
                      <input type="radio" name="bd" value="meta2016" id="op2" onClick="javascript:houseclean();">
                                                        Op2
                 </label>
      <label>
             <input type="radio" name="bd" value="examenes"  id="examenes" onClick="javascript:houseclean();">
                                                        Op3
              </label>
    </div>
  </div>
</div>
<div class="col-sm-5">
  <div class="form-group label-floating">
    <label class="control-label">Tema</label>
    <select class="form-control" name="category" id="category">
                                                        <option disabled="" selected=""></option>
                                                        <?php
                                                        $query = mysql_query("select * from categories where active = 's' order by id ASC");
                                                        while($row = mysql_fetch_array($query)){

                                                        ?>
                                                        <option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']." - ".substr($row['descripcion'], 0, 20)."..."; ?></option>
                                                        <?php } ?>
                                                    </select>
  </div>
</div>
<div class="col-sm-5">
  <div class="form-group label-floating">
    <div class="checkbox">
      <label>
                     <input type="checkbox" id="grupo1" name="g1" value="41" onClick="javascript:houseclean();">
                                                            Bl. 1
                                                        </label>&nbsp;&nbsp;
      <label>
     <input type="checkbox" id="grupo2" name="g2" value="42" onClick="javascript:houseclean();">
                                                            Bl. 2
                </label>&nbsp;&nbsp;
      <label>
        <input type="checkbox" id="grupo3" name="g3" value="43" onClick="javascript:houseclean();">
                                                            Bl. 3
                                                        </label>&nbsp;&nbsp;
      <label>
      <input type="checkbox" id="grupo4" name="g4" value="44" onClick="javascript:houseclean();">
                                                            Bl. 4
                                                        </label>
    </div>
  </div>
    
answered by 02.11.2017 / 17:17
source