// listening for the DOMContentLoaded event to fire on the window, in order
// to delay running the contained JavaScript until after the page's content
// is available:
window.addEventListener('DOMContentLoaded', () => {
// using document.querySelector() to find the first element matching
// the supplied selector (this returns one element or null, so in
// production do sanity-check and prepare for error-handling):
const select = document.querySelector('#marks'),
// we create a new Event, in order that we can use it later:
changeEvent = new Event('change');
// we use EventTarget.addEventListener() to bind the anonymous function
// as the event-handler for the 'change' event:
select.addEventListener('change', function(event) {
// here we cache variables to be used, first we find the 'score'
// element:
const score = document.querySelector('#score'),
// we retrieve the element upon which the event was bound:
changed = event.currentTarget,
// we find the selected option, using spread syntax to
// convert the changed.options NodeList into an Array:
selectedOption = [...changed.options]
// we use Array.prototype.filter() to filter that Array:
.filter(
// using an Arrow function passing in the current <option>
// of the Array of <option> elements over which we're
// iterating into the function. We test each <option> to
// see if its 'selected' property is true (though
// truthy values will also pass with the way this is written):
(opt) => opt.selected
// we use Array.prototype.shift() to retrieve the first Array-
// element from the Array:
).shift(),
// we retrieve that <option> element's text:
optionText = selectedOption.text;
// here we set the disabled property of the 'score' element,
// again using String.prototype.startsWith() to obtain a
// Boolean value indicating whether string does start with
// 'abc' (true) or does not start with 'abc' (false):
score.disabled = optionText.startsWith('abc');
});
// here we use EventTarget.dispatchEvent() to trigger the created
// change Event on the <select> element in order to have the
// 'score' element appropriately disabled, or enabled, according
// to its initial state:
select.dispatchEvent(changeEvent);
});
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
label {
display: block;
}
input[disabled] {
background: repeating-linear-gradient(45deg, transparent, transparent 5px, #ccca 5px, #ccca 10px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<label>Student marks:
<select id="marks" name="studentmarks">
<option value="1">abc-test</option>
<option value="2">abc-test2</option>
<option value="3">cde-test3</option>
</select>
</label>
<label>Score:
<input id="score" type="text">
</label>
</body>