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);
});
Related
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>
I have used the code:
<script type="text/javascript">
$(window).load(function () {
$(document).delegate(".checkall", "click", function(event) {
$(this).closest("table").find(':checkbox').attr('checked', this.checked);
});
});
</script>
This code is working fine when I select/deselect the checkbox in header for the first time. But when I again select the checkbox then this code is not working. The checkboxes are not selected.
You should use .prop() instead of .attr(). And you have to check if an element is already checked.
...
var $checkbox = $(this).closest("table").find(':checkbox');
if ($checkbox.is(':checked')) $checkbox.prop('checked', false);
else $checkbox.prop('checked', true);
...
In my code the selection of all items is possible
I am using a java script to check all and it properly works.But when check one of them from this table, I can't do it.One value is inserted.How it possible to select separately.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function () {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.name').attr('checked', this.checked);
});
// if all checkbox are selected, then check the select all checkbox
// and viceversa
$(".name").click(function () {
if ($(".name").length == $(".name:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
`
try below:
$(function () {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.name').prop('checked', this.checked);
if (this.checked)
insertText();
});
// if all checkbox are selected, then check the select all checkbox
// and viceversa
$(".name").click(function () {
if ($(".name").length == $(".name:checked").length) {
$("#selectall").prop("checked", "checked");
} else {
$("#selectall").prop("checked", false);
}
insertText();
});
function insertText()
{
var arr = [];
$('.name:checked').each(function() {
arr.push($(this).val());
})
$('.text').val($arr.join(','));
}
});
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 have a row of checkboxes and I want the following:
- when clicking the parent select/unselect all child checkboxes
- when all checkboxes are checked (including the parent) and you uncheck one of the child checkboxes, the parent should also uncheck.
I have this code:
$(document).ready(function(){
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
});
And here it is in a fiddle: http://jsfiddle.net/2b2hw58d/1/
Why doesn't it work?
You need to use .prop() instead of .attr() also, use .closest() to find the closest ancestor element matching the selector.
jQuery(function ($) {
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(function () {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
});
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(function () {
var $fs = $(this).closest('fieldset');
$fs.find('.parentCheckBox').prop('checked', !$fs.find('.childCheckBox').is(':not(:checked)'))
});
});
Demo: Fiddle
In this parents('fieldset:eq(0)') part :eq(0) isn't needed and use prop instead attr.
JSFiddle
$(document).ready(function(){
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).closest('fieldset').find('.parentCheckBox').prop('checked') == true && this.checked == false)
$(this).closest('fieldset').find('.parentCheckBox').prop('checked', false);
if (this.checked == true) {
var flag = true;
$(this).closest('fieldset').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).closest('fieldset').find('.parentCheckBox').prop('checked', flag);
}
}
);
});
Use 'prop' instead of 'attr'.
Demo:
http://jsfiddle.net/m3o7u7Lm/1/