CODEWITHSUNDEEP
javascripthtml
Valtrgr
Valtrgr

Reputation: 13

Enabling and Disabling Radio Buttons with js

help! I am making a some of radio buttons to insert into my data base but with the selected value rules may not be selected twice, I have got the js code for but it doesn't work optimally,the problem is if I chosen 1 in price, then I chose 2 in distace then disable follows the second column while disable in the first column disappears.`

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
    $('input:radio').click(function() {

       $('input:radio').removeAttr('disabled');
       if($(this).is(':checked')) {
           var val = $(this).val();

           $('input:radio').each(function() {
               if(val == $(this).val()) {
                   $(this).attr('disabled',true);
               }
           });

           $(this).removeAttr('disabled');
       }
    });
});
</script>
<body>

  <form class="" action="" method="post">


  <table class="table borderless">
    <tr>
      <th>#</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <th>Price</th>
      <th><input type="radio" name="price"  value="1"></th>
      <th><input type="radio" name="price"  value="2"></th>
      <th><input type="radio" name="price"  value="3"></th>
      <th><input type="radio" name="price"  value="4"></th>
      <th><input type="radio" name="price"  value="5"></th>
    </tr>
    <tr>
      <th>distance</th>
      <th><input type="radio" name="distance"  value="1"></th>
      <th><input type="radio" name="distance"  value="2"></th>
      <th><input type="radio" name="distance"  value="3"></th>
      <th><input type="radio" name="distance"  value="4"></th>
      <th><input type="radio" name="distance"  value="5"></th>
    </tr>
    <tr>
      <th>facilities</th>
      <th><input type="radio" name="facilities"  value="1"></th>
      <th><input type="radio" name="facilities"  value="2"></th>
      <th><input type="radio" name="facilities"  value="3"></th>
      <th><input type="radio" name="facilities"  value="4"></th>
      <th><input type="radio" name="facilities"  value="5"></th>
    </tr>
    <tr>
      <th>large</th>
      <th><input type="radio" name="large"  value="1"></th>
      <th><input type="radio" name="large"  value="2"></th>
      <th><input type="radio" name="large"  value="3"></th>
      <th><input type="radio" name="large"  value="4"></th>
      <th><input type="radio" name="large"  value="5"></th>
    </tr>
  </table>
  <button type="sumbit" name="submit">Submit</button>
  </form>

</body>
</html>```
[enter image description here][1]`


  [1]: https://i.sstatic.net/6QI93.png

Upvotes: 1

Views: 2136

Answers (3)

Carsten Massmann
Carsten Massmann

Reputation: 28236

Here is something short and "cryptic", using ES6 function syntax.

First I create an array rbv with similar-value-options from all radio button names. This array contains then 5 jquery objects, each one of length=4.

In the click-handler of the radio buttons I then loop through this array and check for the number of checked elements in each column rv.filter(':checked').length. If it is >0 I set the 'disable' attribute for this whole column to true, otherwise to false.

$(function(){
 var rb =$('input:radio'),              // jquery object with all radio buttons
     rbv=$.makeArray($('[name=price]')) // array of jquery objects, one for each column
          .map(p=>rb.filter((i,r)=>r.value===p.value));
// click-event: check each column for number of checked elements and act accordingly
 rb.click(()=>rbv.forEach(rv=>rv.attr('disabled',rv.filter(':checked').length>0)));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="" method="post">


  <table class="table borderless">
    <tr>
      <th>#</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
    <tr>
      <th>Price</th>
      <th><input type="radio" name="price"  value="1"></th>
      <th><input type="radio" name="price"  value="2"></th>
      <th><input type="radio" name="price"  value="3"></th>
      <th><input type="radio" name="price"  value="4"></th>
      <th><input type="radio" name="price"  value="5"></th>
    </tr>
    <tr>
      <th>distance</th>
      <th><input type="radio" name="distance"  value="1"></th>
      <th><input type="radio" name="distance"  value="2"></th>
      <th><input type="radio" name="distance"  value="3"></th>
      <th><input type="radio" name="distance"  value="4"></th>
      <th><input type="radio" name="distance"  value="5"></th>
    </tr>
    <tr>
      <th>facilities</th>
      <th><input type="radio" name="facilities"  value="1"></th>
      <th><input type="radio" name="facilities"  value="2"></th>
      <th><input type="radio" name="facilities"  value="3"></th>
      <th><input type="radio" name="facilities"  value="4"></th>
      <th><input type="radio" name="facilities"  value="5"></th>
    </tr>
    <tr>
      <th>large</th>
      <th><input type="radio" name="large"  value="1"></th>
      <th><input type="radio" name="large"  value="2"></th>
      <th><input type="radio" name="large"  value="3"></th>
      <th><input type="radio" name="large"  value="4"></th>
      <th><input type="radio" name="large"  value="5"></th>
    </tr>
  </table>
  <button type="sumbit" name="submit">Submit</button>
  </form>

Upvotes: 0

King11
King11

Reputation: 1229

I edited your JS to:

$(document).ready(function() {
    $('input:radio').click(function(){
        var btnGroup = "input:radio[value='" + $(this).attr('value') + "']";
    var btnNameGroup = "input:radio[name='" + $(this).attr('name') + "']";
        $(btnGroup).attr('disabled',true);
    $(btnNameGroup).attr('disabled',true);
    });
});

This groups each radio with their corresponding names and values and you can only select one each within each row and each column. While doing so, the disabled attribute does not leave the groups after another radio button is selected. Since you did not state if you wanted to enable the radio button row again after the first click, I left them all disabled after the user selects something the first time. At least that's how I understood your question.

Here's the jsfiddle of what I've described, maybe this is what you are looking for: https://jsfiddle.net/x1c6mpgL/

Upvotes: 1

Milton
Milton

Reputation: 1012

Is this what you're trying to achieve? https://jsfiddle.net/4ayLkm6h/1/

What I've done is create a variable to keep track of what the previous value was:

  const values = {};

I use this in the click handler to check "has the value changed for this column?", if it has, is re-enable all the checkboxes for that column(for example value=1):

  if (values[name]) {
    $('input:radio[value="' + values[name] + '"]').attr('disabled', false);
  }

Then I update the values for next time:

  values[name] = val;

Lastly I disable the ones in the current column:

$('input:radio[value="' + val + '"]:not(:checked)').attr('disabled', true);

The first time you click the check:

if (values[name]) {

Will be false, so I don't re-enable anything (because nothing is disabled yet), so this code is only relevant on the second click, to check if we need to re-enable the previous column before we disable the currently clicked column.

Upvotes: 2

Related Questions