I have a radio button element with YES and NO options. what I need is: when I click yes, it will disable NO option(which means I can't click it)
here is the code :
<span class="value">
#Html.RadioButtonFor(m => m.ReinstatementType, "1", new { #id = "yesReinstate" }) YES
#Html.RadioButtonFor(m => m.ReinstatementType, "2", new { #id = "noReinstate" }) NO
</span>
I tried to use getElementById but didn't work. also can I hide No option when I click Yes ?
You can add a JavaScript function to listen for the change event on the "YES" radio button, and in the function, disable the "NO" radio button if the "YES" radio button is selected.
E
document.getElementById("yesReinstate").addEventListener("change", function() {
if (this.checked) {
document.getElementById("noReinstate").disabled = true;
}
});
Related
I need to disable click from each element except some of them like Button, Anchor, input, select, .nav-class and checkbox, the mentioned elements should be clickable. I don't want any other element to be clickable, so I write following jQuery code but it is not working.
CODE:-
$('html').click(function() {
$('a , input , button , select ,.boxy-checkbok-box ').click(function(event){
return true;
});
return false;
});
You could try use .not() filtering (jQuery)
$('a , input , button , select ,.boxy-checkbok-box').not('.your-selectors, .another-one').click(function(event) {
event.preventDefault();
});
try this
html
<p class="love">love</p>
a<br>
<input type="text" value="input"><br>
<button>button</button><br>
<select value="select"></select><br>
<span class="boxy-checkbok-box ">boxy-checkbok-box </span>
script
$(document).on('click', 'a , input , button , select ,.boxy-checkbok-box ', function() {
alert('clicked');
});
love div or other element not declared in the on click event is disabled for clicking
I have a group of checkboxes and a QUERY button so user can check a few things and click QUERY button to make a service call to return records. How to disable the QUERY button if none of the checkboxes are checked?
Below are the codes I wrote. The QUERY button got disabled when I first time unchecked all of them. But when I checked only one of checkboxes back again, the array "unchecked" became empty. please help!
_bindChkChangeEvent: function(){
var unchecked = [];
on(query('.chk'), 'change', lang.hitch(this, function(event) {
if(!event.target.checked){
if(unchecked.indexOf(event.target.id) < 0)
unchecked.push(event.target.id);
}
else{
if(unchecked.indexOf(event.target.id) > -1)
unchecked.splice(event.target.id);
}
this._switchQueryBtn(unchecked);
}));
},
_switchQueryBtn: function(unchecked){
if(unchecked.length == 10)
html.addClass(this.btnQuery, 'disabled');
else
html.removeClass(this.btnQuery, 'disabled');
},
At the following link a working example, you can try to adopt this concept to your code (unfortunately the question contains only a partial code view).
https://jsfiddle.net/zmh7bbrf/
What the script does:
Create two checkboxes programmatically.
Create a button programmatically.
Add event handler onChange for each checkbox.
Function showHideButton actually contains the logic to show or hide the button.
Now when the page load, both checkboxes are unchecked, showHideButton runs and button is being disabled.
When User click on a checkbox, re-run function showHideButton.
At this point condition is not met, as one checkbox is checked now, so re-enable the button.
The script could work with any number of checkboxes, just add their reference and modify the logic in showHideButton function.
Notes:
You can use dijit/registry to find references of your widgets, instead of using dojo/query and querying the DOM directly as in the code in your original question.
More information on dijit/registry can be found here:
https://dojotoolkit.org/reference-guide/1.10/dijit/registry.html
require(["dijit/form/CheckBox", "dijit/registry", "dijit/form/Button", "dojo/domReady!"], function(CheckBox, registry, Button) {
new CheckBox({
id: "checkBox0",
name: "checkBox0",
value: "option0",
checked: false,
onChange: function(event) {
showHideButton();
}
}, "checkBox0").startup();
new CheckBox({
id: "checkBox1",
name: "checkBox1",
value: "option1",
checked: false,
onChange: function(event) {
showHideButton();
}
}, "checkBox1").startup();
new Button({
label: "Click me!",
onClick: function() {;
}
}, "button").startup();
var showHideButton = function() {
var checkBox0 = registry.byId('checkBox0'),
checkBox1 = registry.byId('checkBox1'),
button = registry.byId('button');
if (!checkBox0.checked && !checkBox1.checked) {
button.set('disabled', true);
} else {
button.set('disabled', false);
}
};
showHideButton();
});
<input id="checkBox0" />
<label for="checkBox">Option 0</label>
<br>
<input id="checkBox1" />
<label for="checkBox">Option 1</label>
<br>
<button id="button" type="button"></button>
I I am displaying and disabling fields based on user roles. I determine the user role through a basic radio button of two options admin and user. The admin has the ability to disable all textbox fields and button clicks. The problem: when the admin disables the fields, their also locked out from being able to type in the textbox or drag a div. How would it be possible for the admin to disable the fields only for the user?
If I click on radio button admin and then click button to disable fields, the admin can still type in text box and drag div but once I switch to radio button user I want to disable all fields. Once the admin enables fields then switching back to radio button user can also type in text box and drag divs.
jQuery:
/** Determine user role**/
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="admin"){
$("#adminControls").show();
}
if($(this).attr("value")=="user"){
$("#adminControls").hide();
}
});
/** Disable fields **/
var clickCount = 0;
$('#adminControl1').click(function (e) {
clickCount ++;
console.log(clickCount);
if (clickCount % 2 == 1){
$("#appendText").prop( "disabled", true );
$("#divText").prop( "disabled", true );
$('.draggable').draggable( "disable" );
$("#adminControl1").val("Enable All");
} else {
$("#appendText").prop( "disabled", false );
$("#divText").prop( "disabled", false );
$('.draggable').draggable( "enable" );
$("#adminControl1").val("Disable All");
}
});
HTML:
<h3>User Role:</h3>
<div id="roles">
<label><input type="radio" name="userRole" value="admin"> Admin</label>
<label><input type="radio" name="userRole" value="user" checked="checked"> User</label>
</div>
<br/>
<br/>
<div id="adminControls">
<h3>Admin Controls</h3>
<input type="button" id="adminControl1" value="Disable All" />
</div>
<br/>
<textarea rows="4" cols="50" id="divText" placeholder="Enter Text Here!"></textarea>
<input type="button" id="appendText" value="Add Div with Text" /><br/>
<div>
<div class="middle-side empty">
<h2 class="placeholder-title hidden">Place Inside Here</h2>
</div>
</div>
* Edit *
var clickCount = 0;
$('input[type="radio"]').click(function(){
clickCount ++;
if($(this).attr("value")=="admin"){
$("#adminControls").show();
$('#adminControl1').click(function (e) {
if (clickCount % 2 == 1){
$("#appendText").prop( "disabled", true );
$("#divText").prop( "disabled", true );
$('.draggable').draggable( "disable" );
$("#adminControl1").val("Enable All");
}
});
}
if($(this).attr("value")=="user"){
$("#adminControls").hide();
$("#appendText").prop( "disabled", false );
$("#divText").prop( "disabled", false );
$('.draggable').draggable( "enable" );
$("#adminControl1").val("Disable All");
}
});
Don't change the event binding inside another event binding. Since you haven't removed the old event binding, you end up running multiple handlers for the same event. You should put the click handler for the enable/disable button at top level.
For a binary option, use a boolean value, not a counter, which you can toggle with disable = !disable. You should also toggle it in the click handler for the enable/disable button, not the radio button.
var disable = true;
$('#adminControl1').click(function (e) {
$("#appendText, #divText").prop("disabled", disable);
$('.draggable').draggable(disable ? "disable" : "enable");
$("#adminControl1").val(disable ? "Enable All" : "Disable All");
disable = !disable;
});
Clicking on the radio button shouldn't enable or disable anything, it should just hide or show the admin controls depending on which button was clicked. Since the two choices are mutually exclusive, there's no need to test for each value, so I've changed it to use toggle, with an argument that specifies the desired state.
$('input[type="radio"]').click(function () {
$("#adminControls").toggle($(this).attr("value") == "admin");
});
Updated fiddle
UPDATE:
In this version, the enable/disable button just toggles the disable variable and the label of the button, it doesn't actually enable or disable anything. The radio button click handler checks the value of the variable when it's switching into user mode, and enables/disables the controls accordingly. When it's switching into admin mode, it enables everything.
var disable = false;
$('#adminControl1').click(function (e) {
disable = !disable;
$("#adminControl1").val(disable ? "Enable All" : "Disable All");
});
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "admin") {
var tempdisable = false; // Everything is enabled for admin
var adminmode = true;
} else {
tempdisable = disable; // Use the setting that admin assigned
adminmode = false;
}
$("#adminControls").toggle(adminmode);
$("#appendText, #divText").prop("disabled", tempdisable);
$('.draggable').draggable(tempdisable ? "disable" : "enable");
});
FIDDLE
I have the below javascript function which displays updated values after a UI slider selection on the click of a button. I have disabled the button across pages so that the button will not be clicked again.
$(function () {
var disabled = localStorage.getItem("updateDisabled");
if (disabled) $('#update').attr('disabled', disabled);
});
$("#update").click(function (){
this.disabled = true;
localStorage.setItem("updateDisabled", true);
$("#kwBody > tr").each(function() {
var $cells = $(this).children("td");
var found=false,count=0,currentCell;
for (var i=0;i<masterData.length;i++) {
currentCell=$cells.eq(i+1);
found = parseInt(currentCell.text(),10) >=masterData[i];
currentCell.toggleClass("found",found); //add or remove class to highlight
count+=found;
}
window.console && console.log(masterData,count);
$(this).toggle(count==masterData.length); // show if all cells >
});
In my page, I am trying to include another button like "Back" which when clicked on, will reload the initial page itself.
<form method="post" action"willdoit.php">
<input type = "button" value = "Back"></input>
</form>
However if I click on the button nothing happens.
<input type ="submit" value ="Back" />
This will submit your form. Your button you have will only be a button and do nothing.
Change the type to input type ="submit"
How to (un)check a radio input element on click of the element or its container?
I have tried the code below, but it does not uncheck the radio.
HTML:
<div class="is">
<label><input type="radio" name="check" class="il-radio" /> Is </label>
<img src="picture" />
</div>
jQuery:
$(".is label, .is ").click(function () {
if (!$(this).find(".il-radio").attr("checked")) {
$(this).find(".il-radio").attr("checked", "checked");
} else if ($(this).find(".il-radio").attr("checked") == "checked") {
$(this).find(".il-radio").removeAttr("checked");
}
});
You have to prevent the default behaviour. Currently, on click, the following happens:
click event fires for the container (div.is).
click event fires for the label.
Since your function toggles a state, and the event listener is called twice, the outcome is that nothing seems to happen.
Corrected code (http://jsfiddle.net/nHvsf/3/):
$(".is").click(function(event) {
var radio_selector = 'input[type="radio"]',
$radio;
// Ignore the event when the radio input is clicked.
if (!$(event.target).is(radio_selector)) {
$radio = $(this).find(radio_selector);
// Prevent the event to be triggered
// on another element, for the same click
event.stopImmediatePropagation();
// We manually check the box, so prevent default
event.preventDefault();
$radio.prop('checked', !$radio.is(':checked'));
}
});
$(".il-radio").on('change click', function(event) {
// The change event only fires when the checkbox state changes
// The click event always fires
// When the radio is already checked, this event will fire only once,
// resulting in an unchecked checkbox.
// When the radio is not checked already, this event fires twice
// so that the state does not change
this.checked = !this.checked;
});
radio buttons don't uncheck, you need to use a checkbox (type = 'checkbox')
use only html , same functionality
<label for="rdio"><input type="radio" name="rdio" id="rdio" class="il-radio" /> Is </label>