javascript - radio button enabledisable not working as expected - Stack Overflow

admin管理员组

文章数量:1294342

I am trying to switch my radio buttons either true or false using the following functionality.

But as a first click, I am not getting any response. Later on it works fine. ow to solve this issue and what is wrong here?

var switching = false;

$('button').on("click", function() {
  switching = switching == false ? switching = true : switching = false;
  console.log("switching", switching); //first click true but not works!
  $(":radio").attr("disabled", switching);
})

<script src=".1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

I am trying to switch my radio buttons either true or false using the following functionality.

But as a first click, I am not getting any response. Later on it works fine. ow to solve this issue and what is wrong here?

var switching = false;

$('button').on("click", function() {
  switching = switching == false ? switching = true : switching = false;
  console.log("switching", switching); //first click true but not works!
  $(":radio").attr("disabled", switching);
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Live Demo

• javascript
• jquery
• radio-button

Share Follow edited Apr 19, 2017 at 10:52 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Apr 19, 2017 at 10:47 user2024080user2024080 5,1011616 gold badges6363 silver badges117117 bronze badges 1

• Updated fiddle - jsfiddle/qqVGu/592 – Pugazh Commented Apr 19, 2017 at 10:51

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

You can just start from true and switch like this switching = !switching

var switching = true;

$('button').on("click", function() {
  switching = !switching
  $(":radio").attr("disabled", switching);
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Or you can do it just with one line:

$('button').on("click", function() {
    $(":radio").prop('disabled', function(){ return !this.disabled });
});

button.border { border:2px solid green; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>Switch Me</button>

Your ternary operator is incorrect it should be :

switching = switching == false ? true : false;

so your code bees :

var switching = false;

$('button').on("click", function(){
  switching = switching == false ? true : false;
  console.log( "switching", switching );
  $(":radio").attr("disabled", switching);

})

but the first click will not work with this so you need to initialize it as true.

var switching = true;

$('button').on("click", function(){
  switching = switching == false ? true : false;
  console.log( "switching", switching );
  $(":radio").attr("disabled", switching);

})

button.border{
border:2px solid green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

You can also check first whether is disable or not

$('button').on("click", function() {

  if ($(":radio").prop('disabled')){
   $(":radio").attr("disabled", false);
  }
  else
  {
    $(":radio").attr("disabled", true);
  
  }
 
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Add a mon class in your HTML :

<input type="radio" name="foo" value="Y" checked disabled class="radio">
<input type="radio" name="foo" value="N" disabled class="radio">
<input type="radio" name="foo" value="X" disabled class="radio">

<button>
  Switch Me
</button>

Now Here is your JS using class

$( document ).ready(function() {
  $('button').on("click", function(){
    if($('.radio').is(':enabled')) {  
        $(".radio").attr("disabled", true);
    }else {  
        $(".radio").attr("disabled", false);
    }
  });
});

本文标签： javascriptradio button enabledisable not working as expectedStack Overflow