---
title: "Inaktivera och aktivera fält med hjälp av checkboxar"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/167808-inaktivera-och-aktivera-fält-med-hjälp-av-checkboxar"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Trankan"
published: "2008-01-05T15:06:32.000Z"
updated: "2008-05-18T10:22:37.000Z"
replies: 12
views: 791
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/167808-inaktivera-och-aktivera-fält-med-hjälp-av-checkboxar"
---

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

## #1 — Trankan, 2008-01-05T15:06Z

Hej!

Jag har ett formulär med två textfält som från början är inaktiverade. Vad jag vill är att man ska kunna styra om textfälten ska vara aktiverade eller inte med hjälp av två checkboxar. Om checkboxen för ett fält bockas i så ska fältet aktiveras, och bockas checkboxen ur så ska fältet inaktiveras. Är det någon som vet hur man kan lösa detta?

Permalänk: https://www.webforum.nu/p/167808

## #2 — Peter S, 2008-01-05T16:17Z

```
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>
```

Permalänk: https://www.webforum.nu/p/2068155

## #3 — Trankan, 2008-01-05T16:36Z

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?

Permalänk: https://www.webforum.nu/p/2068156

## #4 — Peter S, 2008-01-05T16:43Z

```
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>
```

Permalänk: https://www.webforum.nu/p/2068158

## #5 — Trankan, 2008-01-05T23:03Z

> **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?

Permalänk: https://www.webforum.nu/p/2068202

## #6 — Peter S, 2008-01-06T15:36Z

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>
```

Permalänk: https://www.webforum.nu/p/2068318

## #7 — Trankan, 2008-01-06T16:51Z

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.  ;)

Permalänk: https://www.webforum.nu/p/2068335

## #8 — Peter S, 2008-01-06T18:30Z

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>
```

Permalänk: https://www.webforum.nu/p/2068364

## #9 — Trankan, 2008-01-07T21:17Z

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?

Permalänk: https://www.webforum.nu/p/2068675

## #10 — Peter S, 2008-01-08T17:11Z

Dubbelpost.

Permalänk: https://www.webforum.nu/p/2068867

## #11 — Peter S, 2008-01-08T17:11Z

```
<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>
```

Permalänk: https://www.webforum.nu/p/2068868

## #12 — Trankan, 2008-01-08T17:30Z

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

Permalänk: https://www.webforum.nu/p/2068874

## #13 — Trankan, 2008-05-18T10:22Z

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?

Permalänk: https://www.webforum.nu/p/2110951

---

Tråden på webben: https://www.webforum.nu/amne/javascript/167808-inaktivera-och-aktivera-fält-med-hjälp-av-checkboxar