I have two buttons but I need to Disable and enable these two buttons alternately. So when I click buttonx it will be disabled and buttony will be enabled, then when I click buttony it will be disabled and buttonx will be enabled again, but in my code it not working.
<script>
$(document).ready(function() {
$("#buttonx").click(function() {
$('button').attr('disabled','disabled');
});
$("#buttony").click(function() {
$('button').removeattr('disabled','disabled');
});
});
A code to start with:
$(document).ready(function() {
$("#buttonx").click(function() {
$('#buttony').removeAttr('disabled');
$(this).attr('disabled', 'disabled');
});
$("#buttony").click(function() {
$('#buttonx').removeAttr('disabled');
$(this).attr('disabled', 'disabled');
});
});
Try this, assuming the buttons in question are the only ones with class button
$(function() {
$(".button").click(function() {
$('button').not(this).attr('disabled',false);
$(this).attr('disabled',true);
});
});
There is also a radio alternative
Making radio buttons look like buttons instead
Try this:
$(document).ready(function() {
$("#buttonx").click(function() {
$(this).attr('disabled','disabled');
$('#buttony').removeAttr('disabled');
});
$("#buttony").click(function() {
$(this).attr('disabled','disabled');
$('#buttonx').removeAttr('disabled');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button id="buttonx">
button 1
</button>
<button id="buttony">
button 2
</button>
Related
Is there any workaround to prevent the click on disabled radio button if it is in disabled mode.
$(document).ready(function() {
$(document).dblclick(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return false;
});
});
I tried the above code but still ondblclick event is initiating on my radio button in disabled mode.
You can use css to avoid clicking on radio button
.avoid-clicks {
pointer-events: none;
}
I have implemented following fiddle.Hope it helps you.
$(document).ready(function() {
$('#test').prop('disabled',true);
// document.getElementById('test').disabled=true;
$('#test').dblclick(function (e) {
if(e.target.disabled==true)
return;
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
console.log("test");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio"/>
I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...
Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});
You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});
This works for me:
$('a').css("pointer-events", "none");
In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"
It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>
Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps
$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272
This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});
$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.
If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
I have a group of radio buttons with the lase option "Other" and an input field type text. By default the input field is disabled, if you click on "Other" radio button the field is then enabled. How do I disable the input field if the select on radio button is changed?
This is my code:
$(document).ready(function(){
$("#text-inputt").prop('disabled', true)
});
$("#lastt").click(function(){ $("#text-inputt").prop('disabled', false/true)});
this code is not disabling the input field if you change the radio select.
UPDATE 1
I'm trying this:
$(document).ready(function(){
$("#text-inputt").prop('disabled', true);
});
$("#lastt").click(function(){
if($(this).is(':checked')) {
$("#text-inputt").prop("disabled", false);
} else {
$("#text-inputt").prop("disabled", true);
}
});
But is not setting the input to disable if you change the radio button.
You can do it like this
$(document).ready(function(){
$("#text-inputt").prop('disabled', true);
$('input[type=radio]').click(function(){
if($(this).prop('id') == "lastt"){
$("#text-inputt").prop("disabled", false);
}else{
$("#text-inputt").prop("disabled", true);
}
});
});
change :
$(document).ready(function(){
$("#text-inputt").prop('disabled', true)
});
$("#lastt").click(function(){ $("#text-inputt").prop('disabled', false/true)});
to
$(document).ready(function(){
$("#text-inputt").prop('disabled', true)
});
$("#lastt").click(function(){
if($(this).val=='Other')
{
$("#text-inputt").prop('disabled', false)
}
else
{
$("#text-inputt").prop('disabled', true)
}
});
Try this , Here Input box will toggle ie Enable/Disbale
$("#radioBtn").change(function(){
$("#inputBox").attr("disabled", ! $(this).is(':checked'));
});
A solution could be:
add a change listener to your radio button group
When a radio changes, check its value
if the value is 'other', enable the input field.
Working example: https://jsfiddle.net/3afjqe7j/1/
var $input = $('#text-inputt');
$("input[name=my-radios]").on('change', function() {
var disabled = $(this).val() !== 'other';
$input.prop('disabled', disabled);
});
I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});
All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/
Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo
Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle
I am using the code below where it toggles between 2 div's.
My problem is that I'm using a checkbox to trigger the toggle.
What I need is that...
If the checkbox is NOT check and the user checks it ... then it toggles but if the checkbox is already checked then do not toggle.
Is this possible at all?
Current code is below:
<script type="text/javascript">
$(function(){
$('.togglelink').click(function(){
$('#one').toggle();
$('#two').toggle();
});
});
</script>
What about adding that ?
$('.togglelink').click(function(){
if($(this).attr('checked')) {
return false;
}else{
$('#one').toggle();
$('#two').toggle();
}
});
<script type="text/javascript">
$(function(){
$('.togglelink').click(function(){ if (!($('.togglelink').attr('checked'))) {
$('#one').toggle();
$('#two').toggle();
}
});
});