We Keep Coding

Disabling/re-enabling form elements with vanilla js - Not working properly

I'm using vanilla JS to try and disable/re-enable form elements depending on the value of one of the form elements selected.
function editableFormElements() {
let formElements = document.getElementById('NewCaseForm').elements;
let assignedTo = document.getElementById('assignedTo');
if(assignedTo.value == "pending")
{
for(x = 0; x < formElements.length; x++){
formElements[x].disabled = true;
}
}
else{
for(x = 0; x < formElements.length; x++){
formElements[x].disabled = false;
}
}
assignedTo.disabled = false;
}
document.getElementById('assignedTo').addEventListener('change', editableFormElements);
I always want the 'assignedTo' element to be enabled, so I'm setting disabled to false again at the end of the function. The problem is, this doesn't seem to work. That form element remains disabled. What am I missing here?

By clicking one checkbox other checkbox should be disable

I've 2 columns with checkboxes when one column is checked all respective are checked likewise in 2nd column but the problem is here, client wants when One column of checkbox is checked then 2nd column will be disable or throw alert message to check only one column at a time?
function SelectAll1(headerchk, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = true;
}
}
}
}
else {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = false;
}
}
}
}
}
You can ch

I don't really know what you're trying to do without the HTML but here's a start you can build off.
var selected = $('.check:checked').length;
if (selected >= 1) {
$('.check').prop('disabled', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check" checked="checked">
<input type="checkbox" class="check">
<input type="checkbox" class="check">

From the little info given I assume this:
SelectAll1 clear or set all checkboxes in column 1.
SelectAll2 clear or set all checkboxes in column 2.
headerchk is a checkbox when clicked clears or sets all.
Do this change:
After each line in the code where SelectAll1(headerchk, gridId) is called you change it to SelectAll1(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll2(!headerchk.checked, gridId)
After each line in the code where SelectAll2(headerchk, gridId) is called you change it to SelectAll2(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll1(!headerchk.checked, gridId)
You only showed me the code for SelectAll1, so I assume SelectAll2 is the same when you not yet know how to make them different. Correct me if this is not the fact!
Continue by change the function SelectAll1 to the following:
function SelectAll1(header_checked, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = header_checked;
}
}
}
}
The else-part and if is eliminated by moving the condition to the assignment that is eiher true or false. The .checked part is moved outside the function.
Do the same change in SelectAll2
Test if it works and report to me!

Deselect a radio button in qualtrics

Is there a way to use the qualtrics javascript api (or, if not, a workaround) to programatically clear all entries made to radio buttons on a page?
My usage case is in a matrix table question that "pipes" (actually uses embedded data) values from the previous question to puts calculated numbers into the statements. However, if the respondent navigates back then when the return to the following question the numbers have changed but the responses have remained. As such, if it is the second time a respondent is viewing a page constructed like this, I want to clear all their previous answers.
I want to make sure that qualtrics' data is updated properly.
My survey is currently using the JFE engine if that makes a difference.

Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
var that = this;
var counts = [];
var radioButtonsClean = [];
var radioButtons = $(QID).getElementsByTagName('input');
var radioIndex = [];
for(var i=0; i<radioButtons.length; i++) {
if(radioButtons[i].type == 'radio') {
radioButtonsClean.push(radioButtons[i]);
radioIndex.push(radioButtons[i].id);
}
}
// Set counts for each displayed radio button to 0
for(var i=0; i<radioButtonsClean.length; i++) {
counts[i] = 0;
}
this.questionclick = function(event,element){
if (element.type == 'radio') {
var thisId = element.id;
var spotCheck = radioIndex.indexOf(thisId);
var count = counts[spotCheck];
if (count == 0) {
for(var i=0; i<counts.length; i++) {
counts[i] = 0;
}
counts[spotCheck] = 1;
}
else {
this.setChoiceValue(element.id.split('~')[2], element.id.split('~')[3], false);
counts[spotCheck] = 0;
}
}
}
});

Selecting ONE radio out of many

I'm trying to "modify/change" the way this code works, I want it to only allow ONE radio button selection out of 30 or more choices. as it is written now, it looks for all selected before submitting. im a noob, please be kind.
<script type="text/javascript">
function checkform() {
//make sure all picks have a checked value
var f = document.entryForm;
var allChecked = true;
var allR = document.getElementsByTagName('input');
for (var i=0; i < allR.length; i++) {
if(allR[i].type == 'radio') {
if (!radioIsChecked(allR[i].name)) {
allChecked = false;
}
}
}
if (!allChecked) {
return confirm('One or more picks are missing for the current week. Do you wish to submit anyway?');
}
return true;
}
function radioIsChecked(elmName) {
var elements = document.getElementsByName(elmName);
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return true;
}
}
return false;
}
</script>

Use a counter instead of a flag for "allChecked".
Set it to zero. If the element is checked, use allChecked++ then check to see if the value is ONE at the end.

set first check box checked and others disable from checkbox list in clientside

I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}

If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.

$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});