Inaktivera och aktivera fält med hjälp av checkboxar

function setTextBoxEnabled(name, state)
{
 document.forms["myForm"].elements[name].disabled = !state;
}

<form name="myForm">
 <input name="tb1" disabled="disabled">
 <input type="checkbox" onclick="setTextBoxEnabled('tb1', this.checked)">
  <br>
 <input name="tb2" disabled="disabled">
 <input type="checkbox" onclick="setTextBoxEnabled('tb2', this.checked)">
</form>

Tack så mycket för hjälpen! :) Scriptet fungerar alldeles utmärkt förrutom att om man har bockat i en checkbox och trycker på resetknappen för formuläret, så bockas checkboxen ur men textfältet är fortfarande aktiverat. Kan man göra så att textfältet blir inaktiverat om man trycker på reset-knappen?

function setTextBoxEnabled(name, state)
{
 document.forms["myForm"].elements[name].disabled = !state;
}
function formOnReset(frm, names)
{
 for (var i = 0; i < names.length; ++i)
  frm.elements[names[i]].disabled = true;
}

<form name="myForm" onreset="formOnReset(this, ['tb1', 'tb2'])">
 <input name="tb1" disabled="disabled">
 <input type="checkbox" onclick="setTextBoxEnabled('tb1', this.checked)">
  <br>
 <input name="tb2" disabled="disabled">
 <input type="checkbox" onclick="setTextBoxEnabled('tb2', this.checked)">
 <br>
 <input type="reset">
</form>

Peter S skrev:

function setTextBoxEnabled(name, state)
{
 document.forms["myForm"].elements[name].disabled = !state;
}
function formOnReset(frm, names)
{
 for (var i = 0; i < names.length; ++i)
  frm.elements[names[i]].disabled = true;
}

<form name="myForm" onreset="formOnReset(this, ['tb1', 'tb2'])">
 <input name="tb1" disabled="disabled">
 <input type="checkbox" onclick="setTextBoxEnabled('tb1', this.checked)">
  <br>
 <input name="tb2" disabled="disabled">
 <input type="checkbox" onclick="setTextBoxEnabled('tb2', this.checked)">
 <br>
 <input type="reset">
</form>

Får tacka så mycket igen, nu fungerar allt som det ska! :D

Har dock ett problem till, som säkerligen är mer svårlöst. Jag skulle vilja att submit-knappen i formuläret är inaktiverad tills alla fält är ifyllda. Dock finns det en del undantag här som man behöver ta hänsyn till. Förrutom textfält så finns det rullgardinsmenyer, och dessa ska inte anses som korrekt ifyllda förrän ett annat alternativ än det som finns där från början är valt. Dessutom så ska textfälten med checkboxarna inte räknas in om de är inaktiverade, men är de aktiverade så måste de vara ifyllda. Slutligen finns en checkbox till som måste bockas i innan submit-knappen blir aktiverad. Går det här att lösa tro?

Ett litet exempel:

<script type="text/javascript">
var submitName = "mySubmitButton";
var selectNames = ["select1", "select2"];
var checkboxName = "myCheckBox";
var textBoxes = [
 ["c1", "tb1"],
 ["c2", "tb2"]
];

var selects = [];
selects[selectNames[0]] = {index: -1, changed: false};
selects[selectNames[1]] = {index: -1, changed: false};

function setTextBoxEnabled(name, state)
{
 document.forms["myForm"].elements[name].disabled = !state;
 setSubmitEnabled();
}
function formOnReset(frm, names)
{
 for (var i = 0; i < names.length; ++i)
  frm.elements[names[i]].disabled = true;
}
function setSubmitEnabled()
{
 var elms = document.forms["myForm"].elements;
 var state = elms[checkboxName].checked;
 for (var i = 0; i < textBoxes.length; ++i)
  if (elms[textBoxes[i][0]].checked)
   state = state && (elms[textBoxes[i][1]].value != "");
 for (var i = 0; i < selectNames.length; ++i){
  selects[selectNames[i]].changed = (elms[selectNames[i]].selectedIndex != selects[selectNames[i]].index);
  state = state && selects[selectNames[i]].changed;
 }
 elms[submitName].disabled = !state;
}
function setSelectChanged(sel)
{
 selects[sel.name].changed = (selects[sel.name].index != sel.selectedIndex);
 setSubmitEnabled();
}
function resetSelects()
{
 var elms = document.forms["myForm"].elements;
 for (var i = 0; i < selectNames.length; ++i)
  selects[selectNames[i]].index = elms[selectNames[i]].selectedIndex;
}
window.onload = function()
{
 resetSelects();
 setSubmitEnabled();
}
</script>
<form name="myForm" onreset="formOnReset(this, ['tb1', 'tb2'])">
 <input name="tb1" onkeyup="setSubmitEnabled()" disabled="disabled">
 <input type="checkbox" name="c1" onclick="setTextBoxEnabled('tb1', this.checked)">
  <br>
 <input name="tb2" onkeyup="setSubmitEnabled()" disabled="disabled">
 <input type="checkbox" name="c2" onclick="setTextBoxEnabled('tb2', this.checked)">
 <br>
 <select name="select1" onchange="setSelectChanged(this)">
  <option>1
  <option>2
 </select>
 <select name="select2" onchange="setSelectChanged(this)">
  <option>1
  <option>2
 </select>
 <br>
 <input type="checkbox" name="myCheckBox" onclick="setSubmitEnabled()">
 <br>
 <input type="reset">
 <input type="submit" name="mySubmitButton" disabled="disabled">
</form>

Stort tack för koden, fungerar precis som jag tänkt! :) Det enda är att jag har några vanliga textfält också, som bara behöver fyllas med text för att anses som godkända. Har suttit och testat lite, men jag kan väldigt lite javascript så jag har inte fått det att fungera. ;)

Ett till exempel:

<script type="text/javascript">
var submitName = "mySubmitButton";
var selectNames = ["select1", "select2"];
var checkboxName = "myCheckBox";
var textBoxes = ["t1", "t2"];
var textBoxMappings = [
 ["c1", "tb1"],
 ["c2", "tb2"]
];

var selects = [];
selects[selectNames[0]] = {index: -1, changed: false};
selects[selectNames[1]] = {index: -1, changed: false};

function setTextBoxEnabled(name, state)
{
 document.forms["myForm"].elements[name].disabled = !state;
 setSubmitEnabled();
}
function formOnReset(frm, names)
{
 for (var i = 0; i < names.length; ++i)
  frm.elements[names[i]].disabled = true;
}
function setSubmitEnabled()
{
 var elms = document.forms["myForm"].elements;
 var state = elms[checkboxName].checked;
 for (var i = 0; i < textBoxMappings.length; ++i)
  if (elms[textBoxMappings[i][0]].checked)
   state = state && (elms[textBoxMappings[i][1]].value != "");
 for (var i = 0; i < selectNames.length; ++i){
  selects[selectNames[i]].changed = (elms[selectNames[i]].selectedIndex != selects[selectNames[i]].index);
  state = state && selects[selectNames[i]].changed;
 }
 for (var i = 0; i < textBoxes.length; ++i)
  state = state && (elms[textBoxes[i]].value != "");
 elms[submitName].disabled = !state;
}
function setSelectChanged(sel)
{
 selects[sel.name].changed = (selects[sel.name].index != sel.selectedIndex);
 setSubmitEnabled();
}
function resetSelects()
{
 var elms = document.forms["myForm"].elements;
 for (var i = 0; i < selectNames.length; ++i)
  selects[selectNames[i]].index = elms[selectNames[i]].selectedIndex;
}
window.onload = function()
{
 resetSelects();
 setSubmitEnabled();
}
</script>
<form name="myForm" onreset="formOnReset(this, ['tb1', 'tb2'])">
 <input name="tb1" onkeyup="setSubmitEnabled()" disabled="disabled">
 <input type="checkbox" name="c1" onclick="setTextBoxEnabled('tb1', this.checked)">
  <br>
 <input name="tb2" onkeyup="setSubmitEnabled()" disabled="disabled">
 <input type="checkbox" name="c2" onclick="setTextBoxEnabled('tb2', this.checked)">
 <br>
 <select name="select1" onchange="setSelectChanged(this)">
  <option>1
  <option>2
 </select>
 <select name="select2" onchange="setSelectChanged(this)">
  <option>1
  <option>2
 </select>
 <br>
 <input name="t1" onkeyup="setSubmitEnabled()">
 <input name="t2" onkeyup="setSubmitEnabled()">
 <br>
 <input type="checkbox" name="myCheckBox" onclick="setSubmitEnabled()">
 <br>
 <input type="reset">
 <input type="submit" name="mySubmitButton" disabled="disabled">
</form>

Nu börjar jag nästan känna mig jobbig, men det är så att jag har ett annat formulär också, som innehåller två textfält, en rullgardinsmeny och en textruta. Borde nog kunna få till större delen av scriptet själv om jag ändrar lite i det du redan gett mig, men är lite osäker på koden för textrutan?

Dubbelpost.

<script type="text/javascript">
var submitName = "mySubmitButton";
var selectNames = ["select1"];
var textBoxes = ["t1", "t2", "t3"];
var formName = "myForm";

var selects = [];
selects[selectNames[0]] = {index: -1, changed: false};

function formOnReset(frm)
{
 for (var i = 0; i < textBoxes.length; ++i)
  frm.elements[textBoxes[i]].disabled = true;
}
function setSubmitEnabled()
{
 var elms = document.forms[formName].elements;
 var state = true;
 for (var i = 0; i < selectNames.length; ++i){
  selects[selectNames[i]].changed = (elms[selectNames[i]].selectedIndex != selects[selectNames[i]].index);
  state = state && selects[selectNames[i]].changed;
 }
 for (var i = 0; i < textBoxes.length; ++i)
  state = state && (elms[textBoxes[i]].value != "");
 elms[submitName].disabled = !state;
}
function setSelectChanged(sel)
{
 selects[sel.name].changed = (selects[sel.name].index != sel.selectedIndex);
 setSubmitEnabled();
}
function resetSelects()
{
 var elms = document.forms[formName].elements;
 for (var i = 0; i < selectNames.length; ++i)
  selects[selectNames[i]].index = elms[selectNames[i]].selectedIndex;
}
window.onload = function()
{
 resetSelects();
 setSubmitEnabled();
}
</script>
<form name="myForm" onreset="formOnReset(this)">
 <select name="select1" onchange="setSelectChanged(this)">
  <option>1
  <option>2
 </select>
 <br>
 <input name="t1" onkeyup="setSubmitEnabled()">
 <input name="t2" onkeyup="setSubmitEnabled()">
 <br>
 <textarea name="t3" onkeyup="setSubmitEnabled()"></textarea>
 <br>
 <input type="reset">
 <input type="submit" name="mySubmitButton" disabled="disabled">
</form>

Stort tack för all hjälp, nu fungerar det andra formuläret som det ska också! :)

Drar upp den här gamla tråden igen istället för att skapa en ny, då jag stött på ett litet problem med radioknappar. Problemet är att jag vill kunna kolla om någon av två radioknappar är markerade. Jag har försökt lösa det på egen hand genom att pussla med den kod jag redan fått, men då jag inte kan Javascript så blev det rätt svårt. Skulle du Peter, eller någon annan, kunna ge ett litet exempel?